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

时间:2013-02-05 15:50:24

标签: javascript jquery html

tooltip适用于除下拉项目以外的所有其他内容。

我做错了什么

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

编辑:我的html目前非常基本http://jsfiddle.net/kasfu/

修改我希望当我将鼠标悬停在下拉列表中的某个项目上时显示工具提示

4 个答案:

答案 0 :(得分:1)

从外观上看,它与您的代码无关。这是一个众所周知的问题,看起来不像它的问题(无论如何都会很快)。工具提示在chrome中有效,但webkit浏览器不喜欢option元素上的工具提示。

See here for the bug ticket

我猜你有三个我能想到的解决方案。

  1. 查找其他/构建您自己的工具提示插件,它可以正常工作。

  2. 使用<ul>并将其样式设置为下拉列表,并添加一些jQuery来控制显示/隐藏

  3. 坚持使用浏览器标准工具提示。

  4. 希望这有帮助。

答案 1 :(得分:0)

从您的工具提示插件链接。 我想,这取决于jquery.dimensions.js and jquery.bgiframe.js 来自演示页面。

答案 2 :(得分:0)

我想我有你需要的......

<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();
    });
});

希望这有帮助。

答案 3 :(得分:0)

我认为你应该试试这个

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