jquery.tooltipster.jsを使ってリンクに吹き出し（ツールチップ）を表示する方法｜DAD UNION

jquery.tooltipster.jsを使って、リンクタグのtitle属性に設定のテキストをマウスオーバー時に吹き出し（ツールチップ）表示する方法をご紹介します。

Contents

リンクに吹き出し（ツールチップ）を表示するCSSファイル
jquery.tooltipster.jsを使って、リンクに吹き出し（ツールチップ）を表示するJavaScriptの記述
リンクに吹き出し（ツールチップ）を表示するHTMLの記述
jquery.tooltipster.js：リンクにフキダシ（ツールチップ）を表示するデモページ
- ソース元：Tooltipster – The jQuery Tooltip Plugin

リンクに吹き出し（ツールチップ）を表示する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" />

jquery.tooltipster.jsを使って、リンクに吹き出し（ツールチップ）を表示するJavaScriptの記述

※jquery-1.9.0.min.js、jquery.tooltipster.jsファイルを読み込みます。$(吹き出しを表示するリンクタグ).tooltipster()と記述します。

<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>

リンクに吹き出し（ツールチップ）を表示するHTMLの記述

※吹き出し（ツールチップ）を表示するリンクタグ（class=”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：リンクにフキダシ（ツールチップ）を表示するデモ

ソース元：Tooltipster – The jQuery Tooltip Plugin

~~Tooltipster – The jQuery Tooltip Plugin~~

　
リンク（a）タグのtitle属性のテキストを表示させるだけっていうのが簡単で良いですね。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。