機能満載!ツールチップ(吹き出し)を付けられるjQueryプラグイン「Tooltipster」

機能満載!ツールチップ(吹き出し)を付けられるjQueryプラグイン「Tooltipster」サンプル リンクなどをクリックする前にどんなページか示したりしたいですよね。
また、画像に付加情報を省スペースで出したくもなるものです。
そんな時、Tooltipster - The jQuery Tooltip Pluginを使用すると吹き出しを与えてくれます。

使用方法 Tooltipster - The jQuery Tooltip Pluginからファイル一式をダウンロード。
<link rel="stylesheet" type="text/css" href="tooltipster.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.tooltipster.js"></script>
<script type="text/javascript">
$(function(){
$('.tooltip').tooltipster();
});
</script>

あとはリンクやdivなどにclassを振り、吹き出しに表示させたいテキストをtitleに記載します。
<a href="/" class="tooltip" title="吹き出し文言">テキスト</a> また、オプションが満載です。
animation: 'swing', //表示のエフェクト fade, grow, swing, slide, fall
delay: 200, //表示までの時間
position: 'bottom', //表示位置right, left, top, top-right, top-left, bottom, bottom-right, bottom-left
trigger: 'hover', //表示する際のイベント hover, click
offsetX: 10, //表示位置x軸調整
offsetY: 20, //表示位置y軸調整
speed: 350 //表示アニメーション速度

機能満載!ツールチップ(吹き出し)を付けられるjQueryプラグイン「Tooltipster」サンプル

sponsors

「機能満載!ツールチップ(吹き出し)を付けられるjQueryプラグイン「Tooltipster」」をシェアする

記事作成:
記事URL:

TOP > > > 機能満載!ツールチップ(吹き出し)を付けられるjQueryプラグイン「Tooltipster」