勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

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>

その他

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

 - JavaScript

  関連記事

JavaScriptの変数宣言であるvar / let / constの使い分けについて

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...

Leafletでマーカーをグループ化し、チェックボックスの状態により表示非表示を切り替える方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)

あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...

sweetalert2を閉じた後、指定位置にスクロールしようとしても元の位置に戻る現象を解決する方法

sweetalert2で表示したウィンドウを閉じた後、指定位置にスクロールさせた ...

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法

サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...