工具提示對於無序列表

Question

我有一個無序列表，圖像在列表左側，它們的描述在右側。我的老闆希望列表中的每個項目都能在每次用戶將每個項目放在列表中時提供工具提示。我嘗試在線使用一些jQuery插件，但它只允許一個工具提示，而不是每個項目。我需要幫助。一個很好的例子會有所幫助。

Answer 1

只需將一個title屬性添加到每個列表元素就足夠了嗎？

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

Answer 2

每當我想提示我用下面的插件

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

有很多的例子在那裏 有關列表：

HTML：

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

腳本：

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

如果用戶沒有啓動Javascript他們將看到正常的標題提示

Answer 3

這是我能做的最好的，這也許可以修剪簡潔，但它工作得很好：

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。