jQuery UI 1.9 tooltip on button not working on hover

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?

Chamila Chulatunga · Accepted Answer · 2012-12-12 19:21:02Z

3

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>

edited Dec 12, 2012 at 19:21

answered Dec 12, 2012 at 19:14

Chamila Chulatunga

4,95418 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frédéric Hamidi Over a year ago

Yes, this will work. The title attribute should also be relocated to the <label> element. Updated fiddle here. Also note you can apply tooltips globally by calling $(document).tooltip() once instead of $("selector").tooltip() for several selectors.

Collectives™ on Stack Overflow

jQuery UI 1.9 tooltip on button not working on hover

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related