jQuery UI の Tooltip によるツールチップを、スライドダウンのアニメーションでアンカーテキストの下に表示し、スライドアップのアニメーションで非表示にする方法。
実装例（サンプル）
実装例（サンプル）の動作について
「アンカーテキスト１～３」にカーソルを合わせると、アンカーテキストの下に「アンカーテキスト１～３のツールチップ」という内容のツールチップを表示する。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
JavaScript
<script>
jQuery( function() {
jQuery( "#sample" ).tooltip( {
position: {
my: "left top",
at: "left bottom"
},
show: {
effect: "slideDown",
delay: 300
},
hide: {
effect: "slideUp",
delay: 300
}
} );
} );
</script>
jQuery( function() {
jQuery( "#sample" ).tooltip( {
position: {
my: "left top",
at: "left bottom"
},
show: {
effect: "slideDown",
delay: 300
},
hide: {
effect: "slideUp",
delay: 300
}
} );
} );
</script>
CSS
<style>
<!--
#sample {
padding: 1em;
}
#sample label {
color: #444444;
}
-->
</style>
<!--
#sample {
padding: 1em;
}
#sample label {
color: #444444;
}
-->
</style>
HTML
<div id="sample">
<a href="#" title="アンカーテキスト１のツールチップ">アンカーテキスト１</a>、
<a href="#" title="アンカーテキスト２のツールチップ">アンカーテキスト２</a>、
<a href="#" title="アンカーテキスト３のツールチップ">アンカーテキスト３</a>
</div>
<a href="#" title="アンカーテキスト１のツールチップ">アンカーテキスト１</a>、
<a href="#" title="アンカーテキスト２のツールチップ">アンカーテキスト２</a>、
<a href="#" title="アンカーテキスト３のツールチップ">アンカーテキスト３</a>
</div>