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>
その他
オプション項目やデザイン変更に関しては公式サイトを参照すること。
関連記事
-
-
JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法
JavaScriptのalert / confirmはブラウザによって表示位置や ...
-
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
-
javascriptでのエラーログ
PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...
-
-
JavaScriptで数値のカウントアップ及びカウントダウン
JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...
-
-
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...