无序列表的工具提示

ToolTip For Unordered list

本文关键字：工具提示 列表 无序      更新时间：2023-09-26

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

仅仅为每个列表元素添加一个title属性就足够了吗?

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

这是我能做到的最好的了，为了简洁起见，我可能会做一些修改，但效果很好:

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提琴演示

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

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

上面有很多例子对于列表:

html: 

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

脚本:

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

如果用户没有启用javascript，他们将看到正常的标题工具提示

相关文章：