Tooltip on disabled textbox

Question

According to the TwitterBootstrap docs, and I quote:

To add a tooltip to a disabled or .disabled element, put the element inside of a <div> and apply the tooltip to that <div> instead.

Click here for the docs

Which I have done so:

    function AddToolTip(control) {
        d = jQuery(control).wrap("<div class='" + control.attr('name') + "' 
title='" + control.attr("data-title") + "' />");
        d.tooltip();
     }

And this function gets called like this:

$('#Area').attr('disabled', true).after(AddToolTip($('#Area')));

But the tooltip is not showing up, and it should show up when hovered or clicked.

I have a textbox which I enable/disable depending on another control. The same tooltip is shown whether the textbox is enabled or disabled.

What is it that I'm missing here?

score 0 · Answer 1 · answered Jan 19 '14 at 18:22

0

Return the element from the function:

    function AddToolTip(control) {
        d = jQuery(control).wrap("<div class='" + control.attr('name') + "' 
title='" + control.attr("data-title") + "' />");
        d.tooltip();
        return d;
     }

Without returning the element from the function there is nothing to append after #Area in this line:

$('#Area').attr('disabled', true).after(AddToolTip($('#Area')));

Which causes the div not to be added to the DOM

answered Jan 19 '14 at 18:22

Kevin Bowersox

93,289
19
159
189

That was my original code, but that didn't work. Do I need to re-add the options or something? – Quoter Jan 19 '14 at 19:52
@Quoter on second glance, try removing `return d` and `.after(AddToolTip($('#Area'))`. You shouldn't need to append the element to the `DOM` `wrap` will do that for you. – Kevin Bowersox Jan 19 '14 at 19:56
Removing `.after(AddToolTip($('#Area'))`? But that function is the one responsible for adding the `wrap` in the first place. Do you mean something else? – Quoter Jan 19 '14 at 20:11
@Quoter That is what I mean, or is `#Area` not already on the DOM? Check out the documentation for wrap (http://api.jquery.com/wrap/) specifically the first example. It says that wrap will insert the elements to the DOM, so there is no need for you to. – Kevin Bowersox Jan 19 '14 at 20:18
`#Area` is in the `DOM` yes, i'm just passing it as the control which is the `textbox`. – Quoter Jan 19 '14 at 20:26
Then there is no need to append the wrapped div to the `DOM` using `after`, `wrap` will do this for you. It might actually create an issue if two `DOM` elements have the same id. – Kevin Bowersox Jan 19 '14 at 20:31
One is `class` the other one is `id`, but no double id's. I removed the `after` and called `AddToolTip()` after disabling the `textbox`, but still nothing. – Quoter Jan 19 '14 at 20:36

score 0 · Accepted Answer · answered Jan 19 '14 at 22:46

I ended up fixing it like this:

$('#Test').attr('disabled', true).wrap(function () {
   return "<div class='" + $(this).attr('name') + "'></div>";
});

Here is the AddToolTip() function:

function AddToolTip(className) {
        d = $('.' + className);
        i = $('.' + className + ' :input');
        d.css({
            height: i.outerHeight(),
            width: i.outerWidth(),
            position: "top",
        })
        d.css(i.offset());
        d.attr("title", i.attr("data-title"));
        d.tooltip();
    }

Hope it helps others.

Tooltip on disabled textbox

2 Answers2