wordpressでtooltip(ツールチップ)を導入するには、「WordPress Tooltip」などのプラグインを利用すれば簡単に導入できるようです。
しかし私の場合は、以下のような条件があったため、かっこいい管理画面が作れる「AdminLTE」を参考に、Javascriptとcssでtooltipを実現させました。
- 無題にプラグインを追加したくない
- bootstrap製のtooltipのように「data-original-title」属性に設定した文字列をtooltipで表示したい
- 本ブログの本家サイト(プログラミングスクール検索サイト。bootstrapベースで作成)で使用しているtooltipをそのまま使いたかった。本家サイトの一部のコンテンツを本ブログに移植するため
そもそもtooltipとは何？
tooltipは、ある単語などにマウスを当てると補足説明が出てくるものです。専門用語など補足説明するときに利用できます。
tooltipの例
実現手順
具体的に、tooltipを実現する方法について記載します。
実際に利用するかは、自己責任でお願いします！
実装後は、以下のようにwordpressにてtooltipを実現できるようになります。
「ほれほれここをマウスオーバーしてみな」
実現すると「data-original-title」で設定した文字列が画像のように表示されます。
以下はコードの例です。
<p >ほれほれ<span class="far" data-toggle="tooltip" data-original-title="tooltipが表示されたでしょ" style="color:#ff0000;">ここをマウスオーバー</span>してみな。</p>
- AdminLTE
- 以下のサイトからAdminLTE一式ダウンロード
- https://adminlte.io/
- wordpressにSimple Custom CSS and JSプラグインを導入する
- ここで作成するcss,jsをwordpressに反映させるため
手順1:AdminLTEのダウンロード
AdminLTEをダウンロードします。
ダウンロードしたAdminLTEから以下の必要なファイルを取り出します。
- bootstrap.bundle.min.js
- tooltipの本体(編集しない)
- adminlte.css
- tooltipのレイアウトを整えるのに使用する
手順2:adminlte.cssを編集
「adminlte.css」は、「body」「h1,h2」など全体に影響するcssが設定されています。
そのまま利用してしまうと、wordpressのテーマで設定されているcssに影響をあたえてしまいます。tooltipに関係あるのは、「fade」classのみのため、「fade」に関係しない部分を削除します。この作業はちょっと面倒です。
作業した内容は、githubの以下の場所においたので、参考にしてみてください。
web_tool. Contribute to jshirius/web_tool development by cre…
なぜtooltipに関係があるものが「fade」classだとわかったのか？
ここは興味がある人のみ読んでください。
AdminLTEのtooltipの実装を確認します。
すると・・・
- tooltipを表示させる箇所にマウスを当てると「aria-describedby」属性が動的に追加される
- bootstrap.bundle.min.jsで「aria-describedby」部分を確認すると「fade」classを動的に追加していることがわかった
- よって、adminlte.cssのなかでtooltipに関係するものは「fade」と判定した。
- 競合を避けるためadminlte.cssファイルから「fade」に関係しない部分を削除
手順3:wordpressに反映
以下の内容をSimple Custom CSS and JSプラグインを利用して、wordpressに反映させます。
反映させるときの注意点
- bootstrap.bundle.min.js
- jsファイル(またはjs部分)は、ヘッダーではなくフッター部分に反映させる
- adminlte.css
- tooltipのレイアウトを整えるのに使用する
- 明示的に「
$('[data-toggle="tooltip"]').tooltip();」を呼び出す
Simple Custom CSS and JSプラグイン
反映後は、以下のようなhtmlコードがwordpressに反映されれば、tooltipが表示されるようになります。
<html>
<head>
<!-- jqureryを呼び出す -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- cssを呼び出す。このcssはtooltipのレイアウトを整えるために使用する。-->
<!--なお大本のadminlte.cssをそのまま反映させると、競合する可能性があるためtooltipとは無関係のものを削除すること -->
<link rel="stylesheet" href="./adminlte_for_tooltip.css">
</head>
<body>
<p >ほれほれ<span class="far" data-toggle="tooltip" data-original-title="tooltipが表示されたでしょ" style="color:#ff0000;">ここをマウスオーバー</span>してみな。</p>
</body>
<!-- tooltipを制御するために以下のスクリプトを呼び出す -->
<script src="./bootstrap.bundle.min.js"></script>
<script>
$('[data-toggle="tooltip"]').tooltip();
</script>
</html>
その結果、wordpressにて「プラグイン無しで」tooltipが実現できました。
めでたし、めでたし。
プログラミング・実務経験がある方も必見！
空いた時間をスキルアップ・収入増に使ってみませんか？