0

Here is a js fiddle

JS

$(function(){
    $("select").multiselect();
    $( document ).tooltip();
    $( document ).tooltip( "option", "position", { my: "left+20 center", at: "right center" } );
});

HTML

<select multiple="multiple" size="5">
<optgroup label="England">
    <option title="example 1" value="London">London</option>
    <option title="example 2" value="Leeds">Leeds</option>
    <option title="example 3" value="option3">Manchaster</option>
</optgroup>
<optgroup label="USA">
    <option title="example 4" value="option4">New York</option>
    <option title="example 5" value="option5">Chicago</option>
</optgroup>
</select>

I'm using Eric Hynds' multiselect widget as well as the jQuery UI tooltip widget with jQuery 1.9.1.

I want tooltips to appear when the user hovers over each item in the multiselect widget. To do this, I defined a 'title' attribute for each option within the widget. This works just fine, except that the multiselect widget also has it's own tooltips that appear which contain each option value. Therefore, I get two tooltips for each option.

I would like to either disable the multiselect's inherent tooltips, or make my own tooltips work with another attribute besides 'title' (So far I can't find any other attributes that will work inside an tag). Or, any other ideas?

Rooster
  • 9,954
  • 8
  • 44
  • 71
robz1330
  • 85
  • 3
  • 8
  • Can you post a jsfiddle that shows this problem? jquery ui tooltip works by removing the title attribute on mouseover and adding it back on mouseout to prevent this specific thing from happening. If its not, can't really test without a fiddle. – Rooster Aug 08 '13 at 14:34
  • I put a jsiddle example [here](http://jsfiddle.net/robz1330/3jr2v/127/). Hover over one of the options. The tooltip appears correctly on the right. **Quickly** click outside of the multiselect list. You'll see a **second tooltip displayed behind the list, which disappears quickly along with the other tooltip. Sometimes I've noticed a conflict or bug that happens, where **both** tooltips remain 'stuck' open, and then all subsequent tooltips stay open too. I'd like to suppress the tooltip that appears behind the option list, hoping to prevent this issue. – robz1330 Aug 10 '13 at 18:21
  • are you sure you made that fiddle properly? I'm not seeing any tool tips when I hover over the options. I'm using chrome. – Rooster Aug 10 '13 at 18:54
  • The first one I posted earlier was indeed not correct. But I deleted it and re-posted it with a fix. Make sure the jsfiddle you're viewing ends in '/127/' I just viewed it and it's working. – robz1330 Aug 10 '13 at 19:06

1 Answers1

0

WORKING JS FIDDLE

So basically, whats happening is the multiselect plugin is adding and extra title property to all the inputs is creates so the jquery ui just automatically does its magic on that ones tooltips as well.

A simple workaround for this, is to just remove the title attributes that the multiselect adds before the jquery ui fires up.

Note: in my example I''m removing all input title props. In your production enviroment, you might not want to do that, so you can be more efficient and use something like this if you want:

$('_multiselect_widget_id').find('input').prop('title', '');

Heres my working code:

$(function(){
    $("select").multiselect();
    $('input').prop('title', '');


    $( document ).tooltip();
    $( document ).tooltip( "option", "position", { my: "left+20 center", at: "right center" } );
});
Rooster
  • 9,954
  • 8
  • 44
  • 71