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

2022-07-20

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

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

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

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

Tippy.js

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

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

<!-- CDNでの設置 -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<!-- HTML -->
<button id="myButton">My Button</button>

<!-- javascript -->
<script>
tippy('#myButton', {
  content: "I'm a Tippy tooltip!",
});
</script>

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ファイルを読み込ませてクラスを指定するだけとなります。

<!-- HEAD -->
<link rel="stylesheet" href="hint.css">

<!-- HTML Source -->
<span class="hint--bottom" aria-label="Thank you!">hover over me.</span>

Hint.css

Tootik

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

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

<!-- HEAD -->
<link rel="stylesheet" href="https://npmcdn.com/tootik@1.0.2/css/tootik.min.css">

<!-- HTML Source -->
<span data-tootik="..." data-tootik-conf="..."></span>

Tootik

Intro.js

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

<script src="https://unpkg.com/intro.js/minified/intro.min.js">
<link href="https://unpkg.com/intro.js/minified/introjs.min.css">

<script>
    introJs().setOptions({
  steps: [{
    intro: "Hello world!"
  }, {
    element: document.querySelector('#login'),
    intro: "Click here to login!"
  }]
}).start();
</script>

Intro.js

Toolbar.js

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

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

<!-- HEAD -->
<script src="jquery.toolbar.js"></script>
<link href="jquery.toolbar.css" rel="stylesheet" />

<!-- HTML Source -->
<div id="toolbar-options" class="hidden">
   <a href="#"><i class="fa fa-plane"></i></a>
   <a href="#"><i class="fa fa-car"></i></a>
   <a href="#"><i class="fa fa-bicycle"></i></a>
</div>

<!-- javascript -->
<script>
$('a').toolbar({
    content: '#toolbar-options',
    position: 'top',
    adjustment: 35
});
</script>

Toolbar.js

Balloon.css

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

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

<!-- HEAD -->
<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">

<!-- HTML Source -->
<button data-balloon-length="xlarge" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a Xlarge tooltip</button>

Balloon.css

Tooltip

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

<link rel="stylesheet" href="tooltip-theme-default.css" />
<script src="tether.min.js"></script>
<script src="drop.min.js"></script>
<script src="tooltip.min.js"></script>

<script>
let tooltipInstance = new Tooltip({
  target: document.querySelector('.tooltip-target'),
  content: "My awesome <b>content</b>.",
  classes: 'tooltip-tether-arrows',
  position: 'top left'
})
</script>

Tooltip

Wenk

Wenkはかなり軽量なCSSライブラリです。data属性などを使ってツールチップを簡単に実現することができるライブラリです。

<link rel="stylesheet" href="https://unpkg.com/wenk/dist/wenk.css">

<span data-wenk="I'm to the right!" data-wenk-pos="right">Wenk to the right!</span>

Wenk

Microtip

CSSベースのツールチップライブラリでこちらもファイルサイズが1kb程度の軽量なファイルとなっています。ツールチップの表示位置をカスタマイズすることができるので簡単なツールチップを作成するのに優れています。

<link rel="stylesheet" href="https://unpkg.com/microtip/microtip.css">

<button aria-label="Hey tooltip!" data-microtip-position="top" role="tooltip">

Microtip