KumaTechLab
2022-12-11/2023-05-23

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

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);

対象の指定

対象の指定にはセレクターの文字列指定、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が表示されます。指定した側に表示する余白がない場合は強制的に表示できる位置で表示されます。

矢印

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

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

色を変える

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" />

クリック時に表示する

クリックされたときやフォーカスされた時に表示することもできます。

コンテンツにHTMLを利用する

TooltipのコンテンツにHTMLを利用することもできます。

横幅を決める

横幅を設定することもできます。

AJAXでコンテンツを表示する

Tooltipが表示された後にコンテンツを表示することも可能です。

動的にコンテンツを作成する場合や、ページの読み込み量を減らしたい場合に便利です。

下記は現在日における東京の最高気温と最低気温を取得して表示しています。

まとめ

簡単に使えて便利なことは分かってもらえたと思います。

サイト独自のアイコンにカーソルを合わせた際、ヘルプアイコンをクリックした際などに活用できそうです。

2020 KumaTechLab.