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?

Answer 1

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.

Answer 2

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