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

jquery-tooltip-plugins

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

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

Tooltipster

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

tooltipster

qTip

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

qtip

Prototype2

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

prototip2

Coda Popup Bubbles

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

coda-bubble

SimpleTip

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

simpletip

関連記事

【フォト】皆既月食「スーパー・ブルー・ブラッドムーン」

みなさんは皆既月食ご覧になりましたか? 2018年1月31日の満月は「スーパームーン」として、普段みることができる月よりも大きく光り輝く月をみることができます。さらに、満月が1カ月に2回見られる「ブルームーン」であり、皆既月食のときにみられる「ブラッドムーン」という、月に関する...続きを読む

2018.01.31フォトギャラリー

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

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

2018.08.09BootstrapHTMLコーディング

【HTML】Font Awesome 5 をWEBサイトに組み込む方法

Font AwesomeはWEBサイトにも組み込むことができるアイコンフォントです。現行の最新バージョン(Version 5.8.1)では、無料版で1,513種類、有料版で5,097種類ものアイコンが利用することができます。アイコンは矢印やインターフェースで利用でいる記号、SNS...続きを読む

2019.04.24HTMLコーディング

【WP】WordPressテーマファイルのページ階層早見表

WordPressでサイト構築するために必須となるテーマ。初めてWordPressのテーマのファイルをみるとそれぞれのファイルがどのように関連してサイトが構築されているのか難しく感じるかもしれません。 テーマをカスタマイズしたいとき、テーマを利用したいとき、テーマをより深く...続きを読む

2016.07.03WordPress

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の益々のご...続きを読む

2021.01.01