3

I'm replacing a select with the new jquery-ui selectmenu widget (well: 'covering' would be more precise).

On the select I could easily add a tooltip. I am using jquery-ui tooltip plugin.

I've tried but haven't managed to give the selectmenu one:

* The tooltip on the select does not work any more * Setting a tooltip to the top span of the selectmenu element ('.ui-selectmenu-button') didn't work either

Can it be done?

I'm using jquery ui 1.11.0

Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
Alex
  • 2,117
  • 5
  • 28
  • 36

1 Answers1

3

DEMO of jquery ui tooltip on jquery-ui selectmenu.

JS code:

$(function() {
     var select_id = "SelectMenu";
     $( "#"+select_id ).selectmenu();

     $( "#"+select_id+"-button").tooltip({items: "span", content: 'This is select'});
});

HTML:

<label for="SelectMenu">Selectmenu example:</label>
    <select name="SelectMenu" id="SelectMenu">
        <option id="option1" title="Tooltip1">option1</option>
        <option id="option2" title="Tooltip2">option2</option>
    </select>
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
  • thanks a lot! Two things I don't understand though: 1. Were do you have the '$( "#"+select_id+"-button")' magic from? 2. What does the 'items: "span"' part do? Without this it doesn't seem to work – Alex Jul 24 '14 at 21:11
  • o.k., '$( "#"+select_id+"-button")' turns up when I inspect the html that was created by jquery-ui – Alex Jul 24 '14 at 21:22
  • have you noticed that the tooltip for the select menu item (this is a select) hangs around longer than it should (at least in Chrome on windows) if you go quickly to the other items in the list?Seems it doesn't then get a lost focus message and the tooltip keeps showing – ejectamenta Dec 07 '15 at 14:49