マウスオーバーで吹き出しをつけるjQueryプラグイン(tooltipsterプラグイン)

jquery

画像やタイトル上にマウスポイントを置くとフワっと出てくる吹き出しを作るプラグインを紹介します。

[スポンサーリンク]

吹き出し(ツールチップ)は、CSSのみでも作成可能ですが、jQueryプラグインを使ったほうが実装は楽になると個人的には思います。
CSSよりjQueryプラグインの方が、吹き出しの表示方法(動き)も色々選択できるので、個人的にはjQueryプラグインをおススメします。

今回は、吹き出し(ツールチップ)を表示するためのtooltipsterプラグインを紹介します。

この章でやること

tooltipsterプラグインの導入方法と、使い方を紹介します。

Waypointsをダウンロードする

tooltipsterを取得します。
ダウンロードは本家からどうぞ。
tooltipster1

tooltipsterの導入方法

ハイライトになっているjsとcssが必要になります。
jquery.min.jsは、Google Developersを使っています。
Google Developersの詳細は、こちらをどうぞ

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>tooltipsterのサンプル</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<script src="js/jquery.tooltipster.js"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />

<link rel="stylesheet" type="text/css" href="css/themes/tooltipster-light.css" />
<link rel="stylesheet" type="text/css" href="css/themes/tooltipster-noir.css" />
<link rel="stylesheet" type="text/css" href="css/themes/tooltipster-punk.css" />
<link rel="stylesheet" type="text/css" href="css/themes/tooltipster-shadow.css" />

15行目から18行目は無くても動作します。
入れておけば、あとで色々と吹き出しのテーマを替えて遊ぶことが出来ます。

吹き出し(ツールチップ)を表示するサンプルソース

JavaScript部分のサンプルソースです。

<script type="text/javascript">
    $(document).ready(function() {
         $('.org-tooltip').tooltipster({});
    });
</script>

HTML部分のサンプルソースです。

<h1 class="org-tooltip" title="吹き出しが表示されたよ">この部分をマウスオーバーして下さい</h1>

デモ

実際に動かすことが出来ます

解説

デフォルトの吹き出し(ツールチップ)を表示するのであれば、$('.org-tooltip').tooltipster({});の1行のみでOKです。

吹き出し(ツールチップ)の表示方法は変更することが可能です。
次でその方法を紹介します。

tooltipsterの表示方法を変更する

JavaScript部分のサンプルソースです。

<script type="text/javascript">
    $(document).ready(function() {
		$('.org-tooltip').tooltipster({
		   animation: 'fade', // 動作を変更する。例:fade, grow, swing, slide, fall
		   arrow: true,
		   arrowColor: '',
		   content: '',
		   delay: 500, // 表示するまでの時間
		   fixedWidth: 0,
		   maxWidth: 0,
		   functionBefore: function(origin, continueTooltip) {
		      continueTooltip();
		   },
		   functionReady: function(origin, tooltip) {},
		   functionAfter: function(origin) {},
		   icon: '(?)',
		   iconDesktop: false,
		   iconTouch: false,
		   iconTheme: '.tooltipster-icon',
		   interactive: false,
		   interactiveTolerance: 350,
		   offsetX: 0,
		   offsetY: 0,
		   onlyOne: true,
		   position: 'top', // 表示場所 例:right, left, top, top-right, top-left, bottom, bottom-right, bottom-left
		   speed: 350,
		   timer: 0,
		   theme: '.tooltipster-default', // 吹き出しのデザイン 例:tooltipster-punk,tooltipster-noir,tooltipster-light,tooltipster-shadow
		   touchDevices: true,
		   trigger: 'hover',
		   updateAnimation: true
		});
    });
</script>

デモ

こちらで実際に動かすことが出来ます。

demo

さいごに

いかがでしたか?実装は意外と簡単だったのではないでしょうか。

tooltipsterプラグインを使わずに、CSSとJavaScriptのみで吹き出し(ツールチップ)を作ることも可能です。
ですが、個人的にはプラグインを使うことをおススメします。
tooltipsterプラグインの良いところは、動作や表示形式が色々選べて楽しめることにあると思います。

吹き出し(ツールチップ)を充実させて、jQueryライフを楽しみましょう!
それでは!