プラグインを使わずにwordpressにtooltip(ツールチップ)を導入する【Javascriptとcssのみ】

wordpressでtooltip(ツールチップ)を導入するには、「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
  • 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の以下の場所においたので、参考にしてみてください。

GitHub

web_tool. Contribute to jshirius/web_tool development by cre…

 

なぜtooltipに関係があるものが「fade」classだとわかったのか?

ここは興味がある人のみ読んでください。

AdminLTEのtooltipの実装を確認します。

すると・・・

  1. tooltipを表示させる箇所にマウスを当てると「aria-describedby」属性が動的に追加される
  2. bootstrap.bundle.min.jsで「aria-describedby」部分を確認すると「fade」classを動的に追加していることがわかった
  3. よって、adminlte.cssのなかでtooltipに関係するものは「fade」と判定した。
  4. 競合を避けるため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プラグイン

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が実現できました。

めでたし、めでたし。

プログラミング・実務経験がある方も必見!
空いた時間をスキルアップ・収入増に使ってみませんか?

副業で仕事を取る方法を教えてくれる!
プログラミングスクール4選の詳細

最新情報をチェックしよう!
>プログラミングスクール検索・比較表サイト

プログラミングスクール検索・比較表サイト

ワンクリック、さらに詳細に条件を指定してプログラミングスクールの検索ができます。さらに比較表により特徴を細かく比較できる!

CTR IMG