• かちびと.net

    汎用的で軽量なツールチップ実装jQueryプラグイン・Tooltipsterのご紹介。なかなか使いやすそう。各ブラウザにも対応しています。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

汎用的で軽量なツールチップ実装jQueryプラグイン・Tooltipster

スポンサーリンク

使い勝手の良さそうなプラグイン
だったので備忘録的にご紹介。
ツールチップを実装するjQuery
のプラグインです。マウス追従、
不動タイプの選択が可能、デザ
インもCSSのみで作ります。

各ブラウザにも対応、HTMLタグも利用可能、マウス追従の有無の選択、軽量、などの特徴が有ります。

Sample

動作サンプルです。

マウス追従への変更も可能です。圧縮版で5KBほどとなかなか軽量です。

コード

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tooltipster.min.js"></script>

本体とプラグインを読み込み。

$('.foo').tooltipster();

セレクタを指定してツールチップを表示させたい要素にtitle属性で表示したいテキストを加えます。

$('.foo').tooltipster({
    animation: 'slide',				// アニメーションの設定
    arrow: true,				// 吹き出しの▼部分の有無
    arrowColor: '',				// ▼部分の色
    delay: 200, 				// マウスを乗せてから表示するまでの待ち時間
    fixedWidth: 400,				// 幅
    followMouse: true, 				// マウス追従の有無
    offsetX: 0,					// 位置
    offsetY: 0,					// 位置
    overrideText: '',				// テキストを上書きする場合は設定
    position: 'bottom-right', 			// 場所
    speed: 500, 				// スピード
    timer: 1000,				// タイマー設定
    tooltipTheme: '.my-custom-theme'		// ツールチップのデザイン
});

オプションはこんな感じみたい。

なかなか使いやすそうです。設置も簡単でいいですね。

Tooltipster

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services