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

jquery-tooltip-plugins

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

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

Tooltipster

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

tooltipster

qTip

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

qtip

Prototype2

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

prototip2

Coda Popup Bubbles

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

coda-bubble

SimpleTip

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

simpletip

関連記事

【デザイン】ライセンスフリーのグラフィカルユーザインタフェーステンプレート

WEBサイトやパソコンの画面などに見られるメニューやボタンなどのグラフィカルユーザインタフェース(GUI)のテンプレートをまとめてみました。 Flat Style & iOS 7 Line Style UI Kit PSD フラットデザイン、iOS 7 イメー...続きを読む

2015.02.14インスピレーション

【CSS】CSS3による枠線の新しい表現方法

CSS3より定義された「Border Radius」「Border Image」を使うことで角丸のボックスや、罫線の装飾によってこれまで画像で作成していた要素をCSSのみでデザインすることができるようになりました。 角丸(border-radius) 「b...続きを読む

2015.02.08HTMLコーディング

【デザイン】リアルの花を使った美しいイラストレーションの世界

今回は素敵だなと思ったアーティストさんの作品をご紹介します。表題のとおり、リアルの花や自然のものを使い、美しくかわいらしいイラストレーションの作品を手掛ける Lim Zhi Wei さん。シンガポールを拠点に活動されているアーティストです。 Lim Zhi Wei 彼...続きを読む

2015.02.16インスピレーション

【無料】商用利用OKシームレステクスチャ「岩石(白玉石風)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。白玉石のような白色の石の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.12シームレステクスチャ

Googleウェブマスター向けの情報からみるSEOの必要性について

WEBサイトの制作において、お客様よりSEOについての相談、要望をいただくことがあります。 またSEOを専門に行っている業者で、どの業者を選んでよいかわからないといった相談もありました。 今回は、Googleよりウェブマスター向けに公開されている記事で、SEOについて...続きを読む

2015.02.14SEO