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のライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法
JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...
-
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
-
JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法
ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...
-
-
highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる
highcharts.jsで「棒グラフと折れ線グラフを入れる」「Y軸はそれぞれ違 ...
-
-
Video.jsで表示させた動画プレイヤーにロゴ画像(透かし)を追加する方法(videojs-logo)
Video.jsで表示させた動画プレイヤーの右上等、指定の位置にロゴ画像(透かし ...