JavaScriptで特定の要素にマウスオーバーした際、ツールチップを表示させる「Tippy.js」ライブラリの利用方法

JavaScriptで特定の要素にマウスオーバーした際、ちょっとした説明文等を書いたツールチップを表示したかった。「Tippy.js」というライブラリがバニラJavaScriptで対応でき、デザインもシンプルで良さそう。以下にサンプルと利用方法をメモ。

サンプル

https://taitan916.info/sample/Tippy.js/

Tippy.js

公式サイト

https://atomiks.github.io/tippyjs/

GitHub

https://github.com/atomiks/tippyjs

CDN

CDNで使う場合は以下を記述する。

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

利用方法

ソースコード

<div class="btn" id="top">top</div>
<div class="btn" id="bottom">bottom</div>
<div class="btn" id="left">left</div>
<div class="btn" id="right">right</div>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
tippy(`#top`, {
    content: `ボタン上にツールチップ<br>改行も可能`,
    placement: `top`, //表示位置
    arrow: true, //矢印をつけるかどうか
    allowHTML: true, //HTMLを含めるかどうか
});
tippy(`#bottom`, {
    content: `ボタン下にツールチップ<br>改行も可能`,
    placement: `bottom`, //表示位置
    arrow: true, //矢印をつけるかどうか
    allowHTML: true, //HTMLを含めるかどうか
});
tippy(`#left`, {
    content: `ボタン左にツールチップ<br>改行も可能`,
    placement: `left`, //表示位置
    arrow: true, //矢印をつけるかどうか
    allowHTML: true, //HTMLを含めるかどうか
});
tippy(`#right`, {
    content: `ボタン右にツールチップ<br>改行も可能`,
    placement: `right`, //表示位置
    arrow: true, //矢印をつけるかどうか
    allowHTML: true, //HTMLを含めるかどうか
});
</script>

その他

オプション項目やデザイン変更に関しては公式サイトを参照すること。