mouseover上的文字工具提示

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

這裏是我的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>

來源

2011-03-17 Gabriel

我會建議你使用一個插件，而不是試圖自己做，特別是如果你是一個新手。下面列出了一些相當不錯的東西。另外，如果你有Dreamweaver，他們有一個名爲spry tooltip的小工具，非常易於使用 – LostLin

@Luke：你對任何jquery插件有什麼建議嗎？ –

變化

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

來源

2011-03-17 05:11:30 Davuth

謝謝達弗。我擴展了你的建議（見原文），但仍無濟於事。也從「alt」屬性移動到「標題」。 – Gabriel

Davuth我設法讓它工作。謝啦！ – Gabriel

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

有些人：從

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

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

來源

2011-03-17 04:37:17 ctcherry

謝謝，我試圖安裝它，但我認爲它太強大了，我正在尋找。 – Gabriel

我建議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() + '...'; 
     } 
    } 
});

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

來源

2015-01-31 19:18:32

mouseover上的文字工具提示

回答

相關問題