2022-12-11

Tooltip表示に便利なTippy.jsの使い方

Tooltipを使いたい場合やPopoverを使いたい場合に便利なTippy.jsの使い方を紹介します。

Tooltipのjavascriptライブラリと言えば「popper.js」を思い浮かべる人もいるかもしれません。
Tippy.jsはpopper.jsをベースに作成されたライブラリとなっています。
popper.js自体はTooltip用のライブラリではありません。Tippy.jsはそれをTooltip用としてすぐに使えるようにアレンジしたものとなっています。

自身でTooltipやPopoverを作成したい場合はpopper.jsをベースとして作成、さくっとTooltipやPopoverを使いたい場合はTippy.jsを使用するという使い分けが良いと思います。

準備

Package Managerを使用する場合

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

CDNから読み込む場合

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

使用方法

使用方法は簡単で対象の指定とオプションを指定するだけです。

const element = document.querySelector('.my-button');
const options = {};

tippy(element, options);

See the Pen tippy js by s-Kuma (@kumatechlab) on CodePen.

対象の指定

対象の指定にはセレクターの文字列指定、Element、Elementの配列、NordListの形で指定できます。

// セレクター文字列指定
tippy('.my-button');

// Element指定
const element = document.querySelector('.my-button');
tippy(element);

// Elementの配列指定
const element1 = document.querySelector('.button-1');
const element2 = document.querySelector('.button-2');
tippy([element1, element2]);

// NordList指定
const elements = document.querySelectorAll('button');
tippy(elements);

オプションの指定

オプションはかなり多いので、使う機会の多そうなものをピックアップして紹介します。

全オプションは下記リンクから確認してください。
https://atomiks.github.io/tippyjs/v6/all-props/

表示位置

指定した表示位置にtooltipが表示されます。
指定した側に表示する余白がない場合は強制的に表示できる位置で表示されます。

See the Pen tippy js by s-Kuma (@kumatechlab) on CodePen.

矢印

矢印の有無を設定できます。

また、SVG文字列やSVG Elementを指定することで任意のSVGを矢印にすることも可能です。

See the Pen tippy js placements by s-Kuma (@kumatechlab) on CodePen.

色を変える

Tooltipの色を設定できます。

数種類はデフォルトで用意されていて、CSSを利用して好みの色にも設定できます。

「light」「light-border」「material」「translucent」を使用する場合はそれぞれのCSSを読み込む必要があります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/light.min.css" integrity="sha512-zpbTFOStBclqD3+SaV5Uz1WAKh9d2/vOtaFYpSLkosymyJKnO+M4vu2CK2U4ZjkRCJ7+RvLnISpNrCfJki5JXA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/light-border.min.css" integrity="sha512-DiG+GczLaoJczcpFjhVy4sWA1rheh0I6zmlEc+ax7vrq2y/qTg80RtxDOueLcwBrC80IsiQapIgTi++lcGHPLg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/material.min.css" integrity="sha512-R8oUfFYCO11afzYKUhovrP+cajy9JF0iRRHbuk16gPYstVj9McxsE/D8wnH2l0aBKuhnkAd6VMLiTFV1Bp+zKA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/themes/translucent.min.css" integrity="sha512-MkXwkRGjkxAMeA0Kma3nhRs2CxojMPMv5kgP+y9OcIQkXOTPGyxmjPPddHPov59evYXjcC5B5hM4yUQ5n49Yog==" crossorigin="anonymous" referrerpolicy="no-referrer" />

See the Pen tippy js arrow by s-Kuma (@kumatechlab) on CodePen.