当我将鼠标悬停在下拉列表中的某个项目上时，如何显示JQuery工具提示？

Question

The tooltip works for about everything else except drop down items.

What am I doing wrong

$(document).ready(function(){
    $('option').each(function(){
        $(this).tooltip();
    });
    //$('option').tooltip();
});

edit: my html is pretty basic at the moment http://jsfiddle.net/kasfu/

edit I want the tooltip to show when I hover over an item on the dropdown list

Answer 1

By the looks of it, it has nothing to do with your code. It's a known issue, and one that doesn't look like it will be fixed (any time soon anyway). The tooltip does work in chrome, however webkit browsers don't like tooltips on option elements.

See here for the bug ticket

I guess you have three solutions that I can think of.

1. Find a different / Build your own tooltip plugin that does work.

2. Use a <ul> and style it to look like a drop-down, and add some jQuery to control the show/hide

3. Just stick with the browsers standard tooltip.

Hope this helps.

Answer 2

From your tooltip plugin link. I guess, it depends on jquery.dimensions.js and jquery.bgiframe.js from the demo page.

Answer 3

I think I have what you need..

<select>
    <option title="1" >1</option>
    <option title="2">2</option>
    <option title="3">3</option>
</select>

$(document).ready(function(){
$('option').each(function(){
        $(this).style.top = window.event.clientY + 20;
        $(this).style.left = window.event.clientX;
        $(this).style.display = 'block';
        $(this).tooltip();
    });
});

Hope this helps.

Answer 4

I think you should try this

$('option').each(function(index, element){
        $(element).tooltip({ content: "<div>Select an Item</div>", track: true});
    });