Question

我有一个无序列表，列表左侧是图像，右侧是描述。每当用户将鼠标悬停在列表中的每个项目上时，我的老板都希望列表中的每个项目都提供工具提示。我尝试在线使用一些jQuery插件，但是它只允许整个项目的一个工具提示而不是每个项目。我需要帮助。一个很好的例子会有所帮助。

Answer 1

只需在每个列表元素中添加title属性即可吗？

<li title="tooltip goes here">Blah blah blah</li>

Answer 2

这是我能做的最好的，可能会因为简洁而被修剪，但效果很好：

var pageX, pageY;

$(document).mousemove(
    function(e){
        pageX = e.pageX;
        pageY = e.pageY;
    });

$('#tooltipped li[title]').hover(
    function(){
        var tip = $('<div />')
            .addClass('tooltip')
            .text($(this).attr('title'))
            .css({
                'position' : 'absolute',
                'top' : pageY,
                'left' : pageX
            });
        $(tip).appendTo($(this));
        $(this).mousemove(
            function(){
                $('.tooltip').css(
                    {
                        'top' : pageY,
                        'left' : pageX
                    });
            });
    },
    function(){
        $('.tooltip').remove();
    });

JS Fiddle demo

编辑删除title属性（为了防止jQuery工具提示旁边出现第二个弹出窗口）：

var pageX, pageY;

$(document).mousemove(
    function(e){
        pageX = e.pageX;
        pageY = e.pageY;
    });

$('#tooltipped li[title]')
    .each(
        function(){
            $(this).attr('data-tooltip',$(this).attr('title')).removeAttr('title');
        })
    .hover(
    function(){
        var tip = $('<div />')
            .addClass('tooltip')
            .text($(this).attr('data-tooltip'))
            .css({
                'position' : 'absolute',
                'top' : pageY,
                'left' : pageX
            });
        $(tip).appendTo($(this));
        $(this).mousemove(
            function(){
                $('.tooltip').css(
                    {
                        'top' : pageY,
                        'left' : pageX
                    });
            });
    },
    function(){
        $('.tooltip').remove();
    });

JS Fiddle demo

Answer 3

每当我想要工具提示时，我都会使用以下插件

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

那里有很多例子列表：

html：

<ul id="mylist">
<li title="tooltip text">Something here</li>
</ul>

脚本：

$('#mylist li").tooltip();

如果用户未启用javascript，则会看到正常的标题工具提示

ToolTip For Unorder信息列表

3 个答案: