はじめに

ツールチップを簡単に表示できる atomiks/tippyjs を触る機会があったので、簡単に使い方を整理した。

デモページ

本記事は tippy v5 系を利用しているので、最新 v6 系(2020/08/01 現在)と挙動や設定が異なる可能性あり

TL;DR

  • tippy(<target>, { content: 'my tooltip' }) でツールチップを設定
    • <target> はセレクタ(#id など)でも、Node(document.querySelector('#id') など)でも OK
  • content に HTML も設定可能
    • tippy(<target>, { content: '<strong>my tooltip</strong>' })
    • tippy(<target>, { content: 'my<br>tooltip', allowHTML: true })
  • 既存テーマを利用する場合は CSS を読み込んで theme: 'light のように指定
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. 使い方
      1. 基本
      2. ターゲットの指定
      3. HTML の埋め込み
      4. テーマの指定
      5. 利用可能オプション
      6. 内容を再設定する
      7. 無効化/有効化
      8. 表示/非表示
      9. ツールチップを破棄
      10. その他・メモ
  5. まとめ
  6. 参考文献

環境・条件

  • Google Chrome バージョン: 78.0.3904.108（Official Build）（64 ビット）
  • popper v1.16.0
  • tippy v5.1.2

詳細

公式ドキュメント にまとまっている。

セットアップ

npm でインストール

1
$ npm i tippy.js

CDN の場合は下記

1
2
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>

テーマも CDN から読み込む場合は下記

1
2
3
4
5
<!-- 使いたいものだけ読めば OK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@5.1.2/themes/light.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@5.1.2/themes/light-border.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@5.1.2/themes/material.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@5.1.2/themes/translucent.css">

使い方

基本

ツールチップを表示したい要素に対して tippy を実行するだけ。

1
<button>my button</button>
1
2
3
tippy('button', {
  content: 'this is button',
});

data-tippy-content を設定しておくと、content を指定しなくても良い

1
2
3
<button data-tippy-content="button!!">
  my button
</button>
1
tippy('button');

ターゲットの指定

セレクタでも、document.querySelector などで取得した要素でも良い。
参考: Target types

1
2
3
4
5
6
tippy('#id');
tippy('.class');
tippy('[data-tippy-content]');
tippy(document.getElementById('id'));
tippy(document.getElementsByClassName('class'));
tippy(document.querySelectorAll('.class'));

HTML の埋め込み

content に HTML を埋め込むことも可能
参考: HTML Content

1
2
3
tippy('#id', {
  content: `<strong>my tooltip</strong>`,
});

この機能を利用して、ツールチップ内に画像を設定することもできる

1
2
3
tippy('#id', {
  content: `<img src="/path/to/image">`,
});

「途中で改行だけしたい」などの場合は allowHTML を合わせて指定する

1
2
3
4
tippy('#id', {
  content: `aaa<br>bbb`,
  allowHTML: true,
});
画像の Lazy Load

onShow オプションと組み合わせて、画像の Lazy Load もできる
参考: Lazy load image inside Tooltip? #562

1
2
3
4
5
6
7
tippy('#id', {
  content: `<img data-src="/path/to/image">`,
  onShow: (instance) => {
    let img = instance.popper.querySelector('img');
    img.src = img.dataset.src;
  },
})

テーマの指定

テーマがいくつか用意されているので、オプションで指定すれば変更できる。見た目の違いは ここ で確認できる。
参考: Themes

ただし、CSS を読み込む必要があるので注意。npm でインストールした場合は、node_modules/tippy.js/themes/ に CSS ファイルがあるはず。

1
2
3
4
5
$ ls node_modules/tippy.js/themes/
light-border.css
light.css
material.css
translucent.css

CDN から読み込む場合は下記

1
2
3
4
5
<!-- 使いたいものだけ読めば OK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@5.1.2/themes/light.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@5.1.2/themes/light-border.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@5.1.2/themes/material.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@5.1.2/themes/translucent.css">

テーマは theme オプションで指定

1
2
3
4
tippy('#id', {
  content: `my tooltip`,
  theme: 'light-border',
});
テーマの作成

自分で CSS を設定し、テーマを作成することもできる。
参考: Creating a theme

.tippy-tooltip.xxxx-theme で CSS を設定して、theme: xxxx を指定するだけっぽい。（未確認）

1
2
3
4
.tippy-tooltip.tomato-theme {
  background-color: tomato;
  color: yellow;
}
1
2
3
tippy('button', {
  theme: 'tomato',
});

利用可能オプション

All Props にまとまっている。

内容を再設定する

setContent で再設定可能

1
2
const instance = tippy('#id', { content: '1st' });
instance.setContent('2nd');

複数要素にまとめてツールチップを設定した場合は、forEach などと組み合わせる。

1
2
const instances = tippy('.button', { content: '1st' });
instances.forEach(instance => instance.setContent('2nd'));

無効化/有効化

一時的に無効化したり、再び有効化したりする場合には disable, enable を使う。

1
2
3
const instance = tippy('#id', { content: 'hello' });
instance.disable();
instance.enable();

表示/非表示

show, hide で 表示/非表示 を切り替え可能。

関連: Tippy.js でインスタンス生成せずにツールチップを隠す

ツールチップを破棄

destroy でツールチップを破棄できる

1
2
const instance = tippy('#id', { content: '1st' });
instance.destroy();

その他・メモ

アニメーションを設定したり、Lifecycle Hooksでゴニョゴニョしたり、Ajax でゴニョゴニョしたり、いろいろできるっぽい。

まとめ

  • tippy(<target>, { content: 'my tooltip' }) でツールチップを設定
    • <target> はセレクタ(#id など)でも、Node(document.querySelector('#id') など)でも OK
  • content に HTML も設定可能
    • tippy(<target>, { content: '<strong>my tooltip</strong>' })
    • tippy(<target>, { content: 'my<br>tooltip', allowHTML: true })
  • 既存テーマを利用する場合は CSS を読み込んで theme: 'light のように指定

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list