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. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  2. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  3. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  4. jQuery contextMenu plugin & polyfill
  5. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  6. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP