HTMLやCSS、JavaScriptを利用したおすすめツールチップライブラリ10選

ツールチップとは、Webサイト上のオブジェクト（はてなマークやボタンなど）にマウスオーバーした際に注釈が表示する要素のことを刺します。

特に問い合わせフォームなどに多くみられますが、ツールチップを使うことでより機能を明確に理解させることができます。

今回はこのツールチップをより美しく、おしゃれに表示するためのライブラリを紹介します。

おすすめツールチップライブラリ
最後に

おすすめツールチップライブラリ

Tippy.js

Tippy.jsはツールチップを簡単に作成することができるjQueryライブラリです。表示場所の設定だけでなくAJAX経由で画像やテキストを読み込むことも可能です。

使い方は簡単で、下記のようにCDNを設置し、tippy()を利用するだけとなります。






My Button


<span class="http"><span class="smalltalk">
tippy(<span class="hljs-string">'#myButton'</span>, {
  content: <span class="hljs-comment">"I'm a Tippy tooltip!"</span>,
});
</span></span>

Tippy.js

POPPER

POPPERはツールチップライブラリの中でも軽快で、やく3kb程度のファイルサイズとなっています。コードもとても簡単で、ポップな感じのツールチップとなっています。

下記は使用例です。

import { createPopper } from '@popperjs/core';
const popcorn = document.querySelector('#popcorn');
const tooltip = document.querySelector('#tooltip');
createPopper(popcorn, tooltip, {
  placement: 'top',
});

POPPER

Hint.css

Hint.css はCSSライブラリで、javascriptなどの動的プログラムを利用することなく、おしゃれなツールチップを実現することができます。すべてのモダンブラウザ上でも動作するので、様々なプロジェクトに応用可能です。

使い方はシンプルで、下記のようにcssファイルを読み込ませてクラスを指定するだけとなります。





hover over me.

Hint.css

Tootik

Tooltik はCSSライブラリであり、npmやbower、CDNなどで使用することができます。
data-tootik属性を使用するだけで簡単に利用可能です。

使い方の例は下記の通りです。

Tootik

Intro.js

ツールチップというよりはチュートリアルをツールチップベースで作成することができるjavascriptライブラリとなります。CDNが用意されているのでjavascriptとCSSを読み込むだけで、すぐに利用可能となります。


<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/intro.js/minified/introjs.min.css"</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
    introJs().setOptions({
  <span class="hljs-attr">steps</span>: [{
    <span class="hljs-attr">intro</span>: <span class="hljs-string">"Hello world!"</span>
  }, {
    <span class="hljs-attr">element</span>: <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#login'</span>),
    <span class="hljs-attr">intro</span>: <span class="hljs-string">"Click here to login!"</span>
  }]
}).start();
</span>

Intro.js

Toolbar.js

Toolbar.jsはツールチップとしてバーツールを表示するためのライブラリとなります。
表示位置の調整やモーションエフェクトの追加など多くの機能が備わっています。

使い方の例は下記の通りです。







   
   
   



<span class="http"><span class="http"><span class="http"><span class="http"><span class="smalltalk">
<span class="hljs-string">$(</span><span class="hljs-string">'a'</span>).toolbar({
    content: <span class="hljs-string">'#toolbar-options'</span>,
    position: <span class="hljs-string">'top'</span>,
    adjustment: <span class="hljs-number">35</span>
});
</span></span></span></span></span>

Toolbar.js

Balloon.css

Balloon.cssはほぼツールチップに必要な機能を持たせたCSSライブラリとなります。カスタマイズ方法も詳細に説明されているので、使い方に困ることはないでしょう。

使い方の例は下記の通りです。





I'm a Xlarge tooltip

Balloon.css

Tooltip

Tooltip はオブジェクトに好きな場所にツールチップを表示するためのライブラリです。他のライブラリと異なり、4つのファイルを必要とするので、少し使い勝手はよくないかもしれません。






<span class="http"><span class="http">
<span class="vim"><span class="hljs-keyword">let</span> tooltipInstance = <span class="hljs-keyword">new</span> Tooltip({
  targe<span class="hljs-variable">t:</span> document.querySelector(<span class="hljs-string">'.tooltip-target'</span>),
  conten<span class="hljs-variable">t:</span> <span class="hljs-string">"My awesome &lt;b&gt;content&lt;/b&gt;."</span>,
  classe<span class="hljs-variable">s:</span> <span class="hljs-string">'tooltip-tether-arrows'</span>,
  position: <span class="hljs-string">'top left'</span>
})
</span></span></span>