mouseover上的文字工具提示

Question

我有一套項目符號，我想創建一個工具提示，當我將它們分別放在每個項目上時。工具提示文本可以是項目符號標題標籤，並且需要將其輸出到工具提示容器中。新手到JavaScript，所以這是我需要幫助。

這裏是我的CSS：

.container ul { width: 300px; height: 30px; display: block; background: #CCC; } 
.container li { width: 28px; height: 28px; display: block; float: left; border: 1px solid #FFF; } 
.tooltip { width: auto: height: 12px; display: block; } 

我的HTML：

<div id="tooltip" class="tooltip"></div> 
<div class="container"> 
    <ul> 
     <li class="book" title="book"></li> 
     <li class="movie" title="movie"></li> 
     <li class="tv" title="tv"></li> 
    </ul> 
</div> 

而且我的javascript：

<script> 
$(document).ready(function(){ 
    $("ul li").mouseover(function() { 
     $("#tooltip").text($(this).attr("title")); 
    }); 
}); 
</script> 

Answer 1

變化

$("#tooltip").text($(this).attr('alt'));

Answer 2

這並不直接回答你的問題，但也有一些方便jQuery插件已經存在這個功能。我喜歡這一個：http://craigsworks.com/projects/qtip/a

有些人：從

$("#tooltip").text("this.val(alt)")

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Answer 3

我建議jQuery UI的功能提示。

工具提示文本通常取自您使用此功能的元素的標題屬性 - 但您可以在其他位置獲取。

您可以設置工具提示的位置以及文本內的位置。

$('textarea').tooltip({ 
     position: { 
      my: 'left center', 
      at: 'right center' 
     } 
    }); 

但你可以在代碼中獲取工具提示文本的任何地方。

$('select').tooltip({ 
position: { 
     my: 'right center', 
     at: 'left center' 
    }, 
    content: function(){ 
     if($(this).find('option:selected').val() == 0) 
     { 
      return '...'; 
     } 
     else 
     { 
      return '...' + $(this).find('option:selected').val() + '...'; 
     } 
    } 
}); 

就像在這種情況下，工具提示包含基於所選選項或任何其他文本的文本。