マウスオーバーでのテキストのヒント

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

変更：http://craigsworks.com/projects/qtip/a

いくつか他の人：私はこの1つが好きです。

ツールヒントテキストは、この機能を使用する要素のtitle属性から取得されることがよくありますが、他の場所で取得することもできます。

ツールチップの位置とテキストの位置を内側に設定できます。

$('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() + '...'; 
     } 
    } 
}); 

この場合、ツールチップには選択されたオプションやその他のテキストに基づくテキストが含まれています。

Answer 2

これは直接あなたの質問に答えていませんが、いくつかの便利ながありますこの機能のために既に存在するjQueryプラグイン。私はjQueryのUI機能のツールチップを示唆している

Answer 3

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

に

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

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