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. ScrollMe

    JavaScript

    シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

    ScrollMeというjQueryプラグインを使えば、シンプルでスタイ…

  2. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  3. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  4. Vimeo Carousel Gallery
  5. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  6. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP