Webサイトのユーザーエクスペリエンスを向上させるために、リンクにツールチップを追加したい場合、jquery.tooltipster.jsを使用する方法があります。
この記事では、jquery.tooltipster.jsを活用して、リンクタグのtitle属性に設定したテキストをマウスオーバー時に吹き出し（ツールチップ）として表示する方法を詳しくご紹介します。
リンクにツールチップを表示するためのCSSファイルの設定
まず最初に、リンクにツールチップを表示するために必要なCSSファイルを設定します。以下のスタイルシートは、tooltipster.cssファイルを読み込むもので、必要に応じてカスタマイズできます。
<style type="text/css" media="all">
<!--
body{
margin:0;
padding:0;
}
h1{
text-align:center;
font-size:18px;
font-weight:bold;
padding:10px 0;
line-height:1.4em;
text-align:center;
}
.clWrap{
width:800px;
margin:0 auto;
text-align:center;
}
a{
font-size:18px;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="tooltipster.css" />
このCSSファイルは、各要素のスタイリングを調整し、ツールチップの外観をカスタマイズするために使用します。
jQueryを使用してツールチップを表示するJavaScriptの設定
次に、jQueryを使用してリンクにツールチップを表示するJavaScriptを設定します。
以下のコードは、jquery-1.9.0.min.jsとjquery.tooltipster.jsファイルを読み込み、ツールチップを表示するリンクタグに .tooltip() を適用するものです。
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.tooltipster.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster();
});
</script>
このコードは、ドキュメントが読み込まれた後に実行され、クラスが “tooltip” のリンクタグにツールチップ機能を追加します。
リンクにツールチップを表示するHTMLの設定
次に、ツールチップを表示したいリンクタグを設定します。
以下のHTMLコードは、クラスが “tooltip” のリンクタグのtitle属性に表示させたいテキストを設定するものです。
<div class="clWrap">
<h1>以下のリンクをマウスオーバーするとリンクタグのtitle属性に設定の<br/>テキストが吹き出し表示されます。</h1>
<a href="/" class="tooltip" title="「世のお父さんをもっと生きやすく」をテーマに、お父さんの価値をベースアップしていくためのWEB技術メディア">DAD UNION</a>
</div>
この設定により、特定のリンクにマウスオーバーすると、ツールチップが表示され、リンクの内容が表示されます。
jquery.tooltipster.js：リンクにフキダシ（ツールチップ）を表示するデモページ
ツールチップを実際に試してみたい場合、以下のデモページをご覧いただけます。
jquery.tooltipster.js：リンクにフキダシ（ツールチップ）を表示するデモ
このデモページでは、jquery.tooltipster.jsを使用してリンクにツールチップを表示する具体的な例を確認できます。
ソース元：Tooltipster – The jQuery Tooltip Plugin
Tooltipster – The jQuery Tooltip Plugin
これで、jquery.tooltipster.jsを使用してリンクにツールチップを表示する方法についての詳細なガイドが完了しました。
ユーザーエクスペリエンスを向上させ、情報のわかりやすさを高めるために、ぜひこのテクニックを活用してみてください。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
