Javascript 无序列表的工具提示

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

只需为每个列表元素添加一个

title

属性就足够了吗

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

诸如此类

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

上面有很多例子 有关列表：

html:

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

---

如果用户没有启用javascript，他们将看到正常的标题工具提示，这是我所能做的最好的，可能会为了简洁而对其进行修剪，但效果很好：

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

---

.

正如你所说，举个好例子会很有帮助。你试过什么？应该可以为每个项目添加工具提示。这是一个好主意。如果用户没有javascript，他们将看到工具提示。如果您想想象一下，大多数jquery工具提示插件都可以配置为使用title元素。做得不错，但您需要在运行时从每个元素中删除

title

属性。我看到你的工具提示和标题重叠。是的，如果你看第二个代码块，这就是我更新演示的原因。（我想，原作只是一个概念证明…）。

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

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