jQuery Tooltip Basic

JavaScript

カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

jQuery Tooltip Basicは、カスタマイズしやすいツールチップを実装することができるjQueryプラグインです。アニメーションや表示位置、またはツールチップの幅などをオプションから手軽に設定することが可能です。

jQuery Tooltip Basic

デモ

デモページに記述されたコンテンツ内には、下線が引かれているキーワードがあります。ここにホバーすると、各キーワードに設定されたツールチップが表示される仕組みです。

表示位置、背景カラー、アニメーション、ウィキペディアの表示など、さまざまなパターンのツールチップを見ることができます。カスタマイズ次第でいろんな種類のツールチップを実装できるのがいいですね。

使い方もシンプルでわかりやすいほか、オプションもいくつか用意されています。主なオプションは、animation、class、position、type、value、width、weightです。animationのデフォルト値は「none」ですが、このほかにも「fade」と「shake」があります。

また、表示位置を変更したい場合はpositionから変更可能です。positionのデフォルト値は「right」です。

シンプルながらも、手軽にカスタマイズできるツールチップを実装したいという人は、ぜひ「jQuery Tooltip Basic」を活用されてみてはいかがでしょうか?

jQuery Tooltip Basic

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  2. no-image

    JavaScript

    プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

    jsOnlyLightboxは、jQueryなどを必要としないプレーン…

  3. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  4. PWS Tabs jQuery Plugin
  5. PIGNOSE Calendar

    JavaScript

    美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」

    PIGNOSE Calendarは、美しくてシンプルな操作性によるデー…

  6. Swipe-Li

    JavaScript

    スマホ操作に最適!左右のスワイプで有効・無効を選べるjQueryプラグイン「Swipe-Li」

    Swipe-LiというjQueryプラグインを使えば、左右のスワイプで…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP