もちろん、標準のプラグインを使用できますが、簡単なツールチップを作成するには、jQueryとCSSコードを10行だけ記述するだけです。
それでは始めましょう。 まず、このツールチップの構造に注意してください。これは通常のリンクであり、次のようになります。
<a href ="#" title=" Tooltips"></a>
後で、JavaScriptを使用してタイトルを抽出し、コンテナに貼り付けます。
<div class="tooltip">
<p> Tooltips</p>
</div>
ツールチップのCSSは次のようになります。
.tooltip{
position:absolute;
z-index:999;
left:-9999px;
background-color:#dedede;
padding:5px;
border:1px solid #fff;
width:250px;
}
.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#222;
padding:2px 7px;
}
* This source code was highlighted with Source Code Highlighter .
Javascriptがマウスカーソルの隣に配置されるdivのtopおよびleftプロパティを設定できるように、位置は絶対でなければなりません。 ここでは、プロパティleft = -9999pxを設定しています。 CSSの残りの部分は、視覚的なデザイン専用です。
jQueryツールチップの作成：jQueryコードは短くシンプルです：
スクリプト全体を見てから、何のために順番に説明します。
function simple_tooltip(target_items, name){
$(target_items).each( function (i){
$( "body" ).append( "<div class='" +name+ "' id='" +name+i+ "'><p>" +$( this ).attr( 'title' )+ "</p></div>" );
var my_tooltip = $( "#" +name+i);
$( this ).removeAttr( "title" ).mouseover( function (){
my_tooltip.css({opacity:0.8, display: "none" }).fadeIn(400);
}).mousemove( function (kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout( function (){
my_tooltip.fadeOut(400);
});
});
}
$( document ).ready( function (){
simple_tooltip( "a" , "tooltip" );
});
* This source code was highlighted with Source Code Highlighter .
↑これは、特にjQueryを初めて使用する場合は複雑に見えるかもしれませんが、実際には非常に簡単です。 まず、関数を作成します。
function simple_tooltip(target_items, name){
}
↑target_itemsは、スクリプトを呼び出すことで定義する変数です。 例：#maincontentブロックのすべてのリンクにツールチップを追加するには、「＃maincontent a」と入力する必要があります。 名前は、ツールチップに使用するcssクラスを定義します。 ここでは、スクリプトに柔軟性を持たせるために変数を使用しているため、さまざまなスタイルのさまざまなツールチップを追加できます。
function simple_tooltip(target_items, name){
$(target_items).each( function (i){
// generates code for each tooltip
});
}
↑ここでは、スクリプトによって検出される各アイテムのコードを生成します。 関数に渡すi変数は、各反復後にjQueryによって自動的にインクリメントされます。 これにより、各ツールチップに一意のIDを付与できます。
function simple_tooltip(target_items, name){
$(target_items).each( function (i){
$( "body" ).append( "<div class='" +name+ "' id='" +name+i+ "'><p>" +$( this ).attr( 'title' )+ "</p></div>" );
});
}
↑このスニペットは、各ツールチップのHTMLコードを作成します。 それらはすべて同じクラスを取得しますが、IDは異なります。 タイトルはpタグの間に追加されます。
function simple_tooltip(target_items, name){
$(target_items).each( function (i){
$( "body" ).append( "<div class='" +name+ "' id='" +name+i+ "'><p>" +$( this ).attr( 'title' )+ "</p></div>" );
var my_tooltip = $( "#" +name+i);
});
}
↑この行はツールチップを選択し、将来の使用のために変数に保存します。
function simple_tooltip(target_items, name){
$(target_items).each( function (i){
$( "body" ).append( "<div class='" +name+ "' id='" +name+i+ "'><p>" +$( this ).attr( 'title' )+ "</p></div>" );
var my_tooltip = $( "#" +name+i);
$( this ).removeAttr( "title" ).mouseover( function (){
}).mousemove( function (kmouse){
}).mouseout( function (){
});
});
}
↑これは関数の基本的な構成です。 まず、現在のリンク$（これ）を選択します。 次に、「通常の」ツールチップを表示したくないため、title属性を削除します。ツールチップは、リンクにカーソルを合わせるとすべてのブラウザーに表示されます。
次に、3つの関数を呼び出します。
- mouseoverは、最初にリンクにカーソルを合わせたときに呼び出されます。
- mousemoveは、リンク上でマウスを動かすと呼び出されます。
- mouseoutは、マウスがリンクを「離れる」ときに呼び出されます。
ご覧のとおり、パラメーターをmousemoveに渡します。このパラメーターはマウスカーソルの位置を保存するため、非常に重要です。
$( this ).removeAttr( "title" ).mouseover( function (){
my_tooltip.css({opacity:0.8, display: "none" }).fadeIn(400);
}).mousemove( function (kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout( function (){
my_tooltip.fadeOut(400);
});
* This source code was highlighted with Source Code Highlighter .
次に、さまざまな関数が呼び出されたときに何が起こるかを決定します。
マウスオーバーで、ツールチップにいくつかのcss値を設定します。透明度を定義し、表示を設定します：なし。
mousemoveで、カーソルの横にツールチップを配置するために、上と左の値を設定します。 XおよびY座標は、.pageXおよび.pageYを介して呼び出されます。 また、ツールチップがカーソルの真下にないように、15ピクセルのわずかなオフセットを追加します。
マウスアウトでは、単にfadeOut（）関数を呼び出してツールチップを非表示にします。
$( document ).ready( function (){
simple_tooltip( "a" , "tooltip" );
});
↑最後に行うことは、ドキュメントが読み込まれたらすぐにスクリプトを呼び出すことです。 前述のように、最初のパラメーターはセレクターで、2番目のパラメーターはツールチップのクラス名です。 このようにして、さまざまなツールチップに対してさまざまなデザインを作成できます。
そして、これは私たちの仕事の結果です （ページの下部と、ページの上部の写真にカーソルを合わせると表示されます）