HOME > コラム > WEB全般 > Tooltip(吹き出し)を出すことが出来るjQueryプラグイン「Tooltipster」の使い方

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

コラム

今回は、ちょっとコンテンツを彩る機能を持ったjQueryプラグインを紹介したいと思います。
コンテンツに吹き出しを付けるためのjQueryプラグイン「Tooltipster」です。
絶対に必須というわけではない装飾ですが、コンテンツに吹き出しを付けることが出来れば、補足説明が思った以上にすっきり簡単にできてしまう優れものだったりします。
もし、補足説明などの記述場所にお困りの時には、是非おススメしたいjQueryプラグインです!
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

Tooltipsterサイトイメージ
リンク箇所やテキストコンテンツ、画像でもどこでも吹き出しを出すことが出来ます

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

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

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

本家サイト

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

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_tts_160728.zip
組み込み済みサンプル

サンプルです。

元になるWEBサイトテンプレート(PHP)について

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

組み込みに際して

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

サンプルでは、グローバルメニュー部分だけ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>

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

その他、補足

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

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

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

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

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

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

執筆 : 清水 隼斗

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

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP