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

jquery-tooltip-plugins

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

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

Tooltipster

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

tooltipster

qTip

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

qtip

Prototype2

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

prototip2

Coda Popup Bubbles

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

coda-bubble

SimpleTip

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

simpletip

関連記事

【デザイン】ボトル&瓶詰めのパッケージデザインまとめ

先日、包装用のラベルシールや包装ツールを手掛けさせていただくことになりました。 今日は、ボトル&瓶詰めのパッケージデザインで参考になったデザインワークスのまとめです。 Le Chat ブラジルにあるデザイン事務所「A Sweety Branding Studio.」...続きを読む

2015.03.06インスピレーション

静岡洋館巡り「旧エンバーソン住宅」フォトギャラリー

静岡市の市指定有形文化財「旧エンバーソン住宅」を見てきました。明治時代の西洋建築の装飾などその雰囲気にふれることができました。 概要(引用) 旧エンバーソン住宅は、カナダからキリスト教伝道のため日本に派遣されたロバートエンバーソン師の自邸として、明治37年(190...続きを読む

2015.03.18フォトギャラリー

【JavaScript】ページ内リンクでページスクロールを実現する「smoothScroll.js」

「smoothScroll.js」は、ページ内リンクでページをスクロールを実装できすJavaScriptライブラリです。jQueryを実装していない状態でも稼働するので、手軽に導入できます。 基本的な使い方 導入は簡単、ライブラリを読み込むだけで実装でき、設置後は...続きを読む

2018.02.27HTMLコーディング

【WP】プラグイン『Photospace』の利用方法

以前に紹介をした『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。インストールと標準設定をご紹介しましたが、今回は...続きを読む

2015.06.29WordPress

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

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

2015.03.12インスピレーション