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

Folder Preview Ideasフォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」前のページ

波の動きのようなアニメーションを実装できる「Water Wave Effect jQuery」次のページWater Wave Effect jQuery

関連記事

  1. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  2. Simple Sidebar
  3. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  4. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  5. Choice.js
  6. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP