Tooltip（吹き出し）を出すことが出来るjQueryプラグイン「Tooltipster」の使い方

Tooltip（吹き出し）を出すことが出来るjQueryプラグイン「Tooltipster」の使い方

今回、紹介致しますjQueryプラグイン「Tooltipster」を組み込みますと、リンクの有無やテキストか画像か・・・などなど、諸々関係なく吹き出し（Tooltip）を出すことが出来るようになります。
そのため、補足説明の記述などスペースに困った時に役立つ一品です。

オプションも豊富にあるため、細かい設定をすることが出来るので、ワンパターンな感じで吹き出しを入れる感じではありません。
上手く装飾出来れば見た目もクールな感じになること間違いありません。

それではすすめていきたいと思います。

以下が本家サイトです。
以下のサイトで諸々のファイルをダウンロードして頂けます。

• Tooltipster

phptemp_tts_160728.zip

サンプルです。

• 組み込み済みサンプル

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

組み込み手順は普通な感じですので、順を追って解説致します。

サンプルでは、グローバルメニュー部分だけTooltipが出るようにしています。
他のリンクやコンテンツではTooltipは出ませんので、適宜調整してみてください。

まずは必要ファイルの記述設定を行います。

本家からダウンロードしてきた「tooltipster-master.zip」の中から以下のファイルを自サイトの環境へアップします。

• /dist/js/tooltipster.bundle.js
• /dist/css/tooltipster.bundle.css
• /dist/css/plugins/tooltipster/sideTip/theme/~

上記の/theme/フォルダは、吹き出しのデザインパターンのためのCSSが入ったフォルダです。
デフォルトのテーマを変更する場合に必要になるCSSファイルです。

当サイトで配布しているテンプレートとサンプルでは「tooltipster-light」のテーマを使っています。

当サイトのテンプレートではTooltipsterを全ページに反映させるため、全ページで共通している「/_set/」ディレクトリ内にある「css.php」と「js.php」に記述して読み込ませています。

jsの設定についても「js.php」に以下の内容を記述しています。

<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
animation: 'fade',
delay: 200,
theme: 'tooltipster-light'
});
});
</script>

上記のオプション指定箇所にある「theme」のところと、CSSファイルの名称を合わせて頂ければ吹き出しのデザインが変わります。
以下の組み合わせです。

• tooltipster-borderless : tooltipster-sideTip-borderless.min.css
• tooltipster-light : tooltipster-sideTip-light.min.css
• tooltipster-noir : tooltipster-sideTip-noir.min.css
• tooltipster-punk : tooltipster-sideTip-punk.min.css
• tooltipster-shadow : tooltipster-sideTip-shadow.min.css

吹き出しを追加したい箇所にspanやdivを付与し、その中に以下のような形式で記述してください。

<span class="tooltip" title="吹き出しの内容です！">テスト</span>

<div class="tooltip" title="吹き出しの内容です！">テスト</div>

<a class="tooltip" title="吹き出しの内容です！">テスト</a>

上記のような形式で記述すれば、マウスカーソルを合わせた時にtitleの内容が吹き出しで出てくるようになります。
吹き出しの内容は画像でも表示することが出来るので、imgタグなどで記述するなども可能です。

上記までの設定と記述が出来たら、修正したファイルを全てアップしてください。
マウスカーソルを併せた時に吹き出しが出てきたら完了です。

オプションの内容はヘッダ内に記述したJS記述箇所の中に追記してください。

<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
// オプション記述箇所ここから
animation: 'fade',
delay: 200,
theme: 'tooltipster-light'
// オプション記述箇所ここまで
});
});
</script>

オプション内容は以下のリンク先でご確認ください。

• Tooltipsterオプション内容

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。

そこまで難しいというわけではありませんが、かなり細かい感じのjQueryプラグインでしたので、若干、難しく感じたかもしれませんね。
オプションの幅が広いため、色々な演出が出来るようになっています。
あまり派手な演出はクールでなくなるため推奨しにくいところですが、チャレンジしてみるのはありなのかもしれません。

今まで小技的なjQueryプラグインはあまり取り上げてこなかったような気がします。
というのも、使いどころに悩むのもナンセンスな感じがしまして・・・。

ただ、ちょっとした演出や装飾が出来ればサイトの表情が変わるのも事実だと思います。
それこそがコンテンツマーケティングなのかな？と思う今日この頃なわけですが、つまりそういうことでして、これからはちょっとした演出のためのjQueryプラグインも取り上げていこうと思います。

しかし、前回の制作チップスの紹介から時間が少し空いていました。汗
出来る限り間を空けないように気を引き締めなおしたい今日この頃です。

執筆 : 清水 隼斗

Tooltip（吹き出し）を出すことが出来るjQueryプラグイン「Tooltipster」の使い方のAMPページ