Any way to bind bootstrap tooltip onto an input field on inline editor?

dan@19ideas.com

I've spent several hours on this, and I'm at a loss. I want to give direction on validating inputs before the user actually enters in a number.

The idea I had was, when a textbox gets its focus in the inline editor, the bootstrap tooltip pops up. The thing is, I also need the tooltip to be unique for each input box.

So if I click on a column of any row, the text turns into an input box. I need to bind the tooltip to that, so when I click or focus into that input box, the tooltip will show up. This also needs to happen when I open the pop up showing the fields the user will enter.

I have something kinda working. The tooltip is displayed correctly over the textbox in the table when you first click on it. But when you tab to the next textbox, the tooltip doesn't get generated until you focus out and come back in. This is what I have so far. Problem with this, is that it'd give the same message for each textbox. I'd need to find out what kind of textbox this is. Which I think I can get by using this.id.

            editor.on('open', function (e) {

                $("input[id^='DTE']").attr("data-toggle", "tooltip");
                $("input[id^='DTE']").attr("title", "Must be between <br /> -5000 and 60000");
                $("input[id^='DTE']").tooltip(
                    {
                        html: true,
                        placement: "top",
                        trigger: "hover focus"
                    }
                    );
            });

allan

How about using node() rather than the open event:

$('input', editor.node()).tooltip( ... )?

You could use the attr option for the text field type (and others) to assign the data-toggle and title attributes.

Allan

dan@19ideas.com

Absolutely perfect thanks again!!

        tooltipConfig = {
                html: true,
                placement: "top",
                trigger: "focus"
            };

            $('input', editor.node('Field1'))
                .attr("data-toggle", "tooltip")
                .attr("title", "Must be between <br /> -5000 and 60000")
                .tooltip(tooltipConfig);

            $('input', editor.node('Field2'))
                .attr("data-toggle", "tooltip")
                .attr("title", "Must be between <br /> -3000 and 400")
                .tooltip(tooltipConfig);