【JavaScript】マウスオーバーでTooltips(吹き出し)を表示するライブラリまとめ

jquery-tooltip-plugins

グラフィカルユーザインタフェース(GUI)において普及した表現手法のひとつにTooltips(ツールチップ)と呼ばれるものがあります。カーソルを合わせたときに吹き出しなどの小さな枠が表示され、補足の説明が表示される表現方法です。

今回は、Tooltips(吹き出し)を実装するためのJavaScriptライブラリをまとめてみました。

Tooltipster

一般的な吹き出しタイプのツールチップが表示できるライブラリです。デザインテーマを複数選ぶことができます。

tooltipster

qTip

一般的な吹き出しタイプのツールチップが表示できるライブラリです。カーソルを重ねた要素の右端から表示されます。

qtip

Prototype2

一般的な吹き出しタイプと、バツボタンをクリックして吹き出しを消すことができるツールチップが表示できるライブラリです。カーソルを外してもツールチップを表示したままにできます。

prototip2

Coda Popup Bubbles

一般的な吹き出しタイプのツールチップが表示できるライブラリです。カーソルを外したときに、ツールチップすぐに消えず表示されるのが特長です。

coda-bubble

SimpleTip

シンプルな枠のツールチップが表示できるライブラリです。

simpletip

関連記事

【WP】WordPressの本文抜粋・本文の一部を取得する

WordPressで投稿された記事の本文の一部「抜粋」を取得するために、テンプレートタグthe_excerpt()とget_the_excerpt()があります。the_excerpt()とget_the_excerpt()は、投稿時に抜粋欄へ入力があればその内容が表示され、抜粋...続きを読む

2018.12.04HTMLコーディングWordPress

【WP】管理画面をカスタマイズできるプラグイン「AG Custom Admin」

今回紹介するプラグイン「AG Custom Admin」を使用すると、WordPressの管理画面のログイン、メニュー項目、ダッシュボードなどをカスタマイズできるようになります。 ダッシュボードなど個々にカスタマイズできるプラグインなどはありますが、「AG Custom A...続きを読む

2016.07.08WordPress

【HTML】Bootstrapの基本「マージン」と「パディング」

『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサイト制作が可能です。 『Boots...続きを読む

2018.08.09BootstrapHTMLコーディング

【CSS】リンクフォーカスを利用したナビゲーションのボタン操作

CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。 {a:focus}はリンクにフォーカスされているとき。クリックされた時やT...続きを読む

2015.02.08HTMLコーディング

【デザイン】エレベーターに仕掛けられたクリエイティブな広告

エレベーターでは多くの人がじっとしていることが多く広告を見てもらうには良い空間かもしれません。そのようなエレベーターに仕掛けられたアイディアがあるクリエイティブな広告をまとめてみました。 Be born again. / Dr.Kim plastic surgery ...続きを読む

2015.03.12インスピレーション