Question

i’m using jQuery UI 1.9 to make buttons of checkboxes and for tooltips. My HTML is simple:

<input type="checkbox" id="jq-ui-button" value="Test" title="tooltipppp">
<label for="jq-ui-button">Label ok</label>

Then i call in JS:

$("input[type='checkbox']").button();
$("input[type='checkbox']").tooltip();

http://jsfiddle.net/rniestroj/JnApC/

The problem is that i see the tooltip when i click the button/checkbox but i want to see the tooltip normally on hover. Is this a bug in jQuery UI 1.9 or how can i achieve the effect i want?

Answer 1

My understanding is that when .button() is applied to a checkbox, it is the associated label that is styled to be the button. It may therefore be necessary to apply the .tooltip() to the label rather than to the checkbox itself:

$("input[type='checkbox']").button();
$("label[for='jq-ui-button']").tooltip();

The associated title attribute would therefore also need to be applied to the label instead:

<input type="checkbox" id="jq-ui-button" value="Test">
<label for="jq-ui-button" title="tooltipppp">Label ok</label>