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の動画プレイヤー用ライブラリ「Video.js」の利用方法
サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...
-
-
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...
-
-
JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法
table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSV ...
-
-
モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法
モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィン ...
-
-
PHPとajaxでチャットの作成
■ソース ・index.php <? error_reporting(E_ ...