Question

I’m trying to make tooltips appear using jQuery Tools’ tooltip feature. When the mark up looks like this, it’s fine:

<input type="submit" title="Submit your foo" value="foo"></input>

But when the input is disabled, the title mysteriously disappears from the DOM:

<input type="submit" disabled="disabled" title="Sorry, you cannot submit your foo" value="foo"></input>

This only happens when I try to use jQuery tools. If I don’t use jQuery tools, the title appears just fine (default browser effect). Any ideas what’s wrong?

UPDATE:

http://jsfiddle.net/7jCXz/ – this example seems to remove the title attribute in both input tags, not just the disabled one.

Answer 1

Try to wrap your submit button into an div, then use tooltip on your div:

$(document).ready(function(){
    $('input[disabled="disabled"]').each(function(){
        var $tit = $(this).attr('title');
        $(this).wrap('<div class="submitWrapper" title="' + $tit + '"></div>');
    });
    //$('.submitWrapper').tooltip(); // or something like this
    $('.submitWrapper').on('mouseover', function(){
        alert('submitWrapper clicked!');
    });
});

---

Demo