iPentec.com  /  Doc  /  CSS

目次

HTMLページでToolTips (ツールチップ) のポップアップ表示を実装する - CSS

HTMLページで要素の上にマウスポインタが重なるとポップアップウィンドウを表示する動作 - ToolTips(ツールチップ) を作成するコードを紹介します。

概要

Windows アプリケーションではツールバーのボタンなどにマウスポインタが重なり、しばらくマウスポインタが静止すると小さなポップアップウィンドウが表示され、 ボタンやコントロールの説明が表示されます。
同様の表示をCSSなどを利用してHTMLページで実装するコードを紹介します。

ツールチップの例1
ツールチップの例1

ツールチップの例2
ツールチップの例2

実装方針

ツールチップで表示する枠をページ内に記述しておき、デフォルトで非表示状態にします。 ツールチップを表示するエリアにマウスポインタが入ったら、ツールチップの枠にサブクラスを追加し画面に表示される状態にします。 同時に、ツールチップを表示するエリアの座標をgetBoundingClientRect()メソッドで取得し、ツールチップの表示位置を設定します。

プログラム例:シンプルな実装

コード

以下のCSS、HTMLファイルを作成します。
tooltip-simple.css
p {
  border:1px solid #ff6a00;
}

.ToolTipWindow {
  color: #FFFFFF;
  background-color: #3d3d3d;
  border: none;
  position: absolute;
  visibility: hidden;
  opacity: 0.9;
  padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  border-radius: 2px 2px 2px 2px / 2px 2px 2px 2px;
}

  .ToolTipWindow.visible {
    visibility: visible;
  }
tooltip-simple.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="tooltip-simple.css" />

  <script type="text/javascript">
    window.addEventListener("load", function () {

      var elem1 = this.document.getElementById("text1");
      var elem1rect = elem1.getBoundingClientRect();
      var ToolTip1 = document.getElementById("tooltip1");

      elem1.addEventListener("mouseover", function () {
        ToolTip1.style.left = (elem1rect.left+32)+"px";
        ToolTip1.style.top = (elem1rect.top + 32) + "px";
        ToolTip1.classList.add("visible");
      });
      elem1.addEventListener("mouseleave", function () {
        ToolTip1.classList.remove("visible");
      });

      var elem2 = this.document.getElementById("text2");
      var elem2rect = elem2.getBoundingClientRect();
      var ToolTip2 = document.getElementById("tooltip2");
      elem2.addEventListener("mouseover", function () {
        ToolTip2.style.left = (elem2rect.left + 32) + "px";
        ToolTip2.style.top = (elem2rect.top + 32) + "px";
        ToolTip2.classList.add("visible");
      });
      elem2.addEventListener("mouseleave", function () {
        ToolTip2.classList.remove("visible");
      });

      var elem3 = this.document.getElementById("text3");
      var elem3rect = elem3.getBoundingClientRect();
      var ToolTip3 = document.getElementById("tooltip3");
      elem3.addEventListener("mouseover", function () {
        ToolTip3.style.left = (elem3rect.left + 32) + "px";
        ToolTip3.style.top = (elem3rect.top + 32) + "px";
        ToolTip3.classList.add("visible");
      });
      elem3.addEventListener("mouseleave", function () {
        ToolTip3.classList.remove("visible");
      });

    })
  </script>
</head>
<body>
  <p>
    <span id="text1" aria-describedby="tt1">ぺんキー</span><br />
    <span id="text2" aria-describedby="tt2">らくキャ</span><br />
    <span id="text3" aria-describedby="tt3">しくケー</span><br />
  </p>

  <span id="tooltip1" class="ToolTipWindow" aria-hidden="true">ぺんぎんクッキー</span>
  <span id="tooltip2" class="ToolTipWindow" aria-hidden="true">らくだキャラメル</span>
  <span id="tooltip3" class="ToolTipWindow" aria-hidden="true">しろくまケーキ</span>
</body>
</html>

解説

HTML

HTML部分では、ツールチップが表示される要素と、ツールチップの枠を記述しています。
idが text1 text2 text3 の要素がマウスオーバーによりツールチップが表示される要素になります。 ツールチップとしてポップアップ表示される要素がidが tooltip1 tooltip2 tooltip3 の要素になります。
<body>
  <p>
    <span id="text1" aria-describedby="tt1">ぺんキー</span><br />
    <span id="text2" aria-describedby="tt2">らくキャ</span><br />
    <span id="text3" aria-describedby="tt3">しくケー</span><br />
  </p>

  <span id="tooltip1" class="ToolTipWindow" aria-hidden="true">ぺんぎんクッキー</span>
  <span id="tooltip2" class="ToolTipWindow" aria-hidden="true">らくだキャラメル</span>
  <span id="tooltip3" class="ToolTipWindow" aria-hidden="true">しろくまケーキ</span>
</body>

JavaScript

JavaScriptのコード部分は、window.addEventListener("load",) メソッドを呼び出し、ページが読み込まれた直後に実行するイベントリスナを設定します。
  window.addEventListener("load", function () {
    /* 中略 */
  }

イベントリスナでは以下のコードを実行します。
ToolTipを設定する要素を取得します。ToolTipを設定する要素は elem1 変数に代入します。 合わせて、ToolTipを設定する要素のページ内の座標値を取得します。座標はgetBoundingClientRect()メソッドで取得します。 getBoundingClientRectメソッドの詳細についてはこちらの記事を参照してください。
また、ツールチップの枠の要素を取得します。こちらは ToolTip1変数に代入します。
      var elem1 = this.document.getElementById("text1");
      var elem1rect = elem1.getBoundingClientRect();
      var ToolTip1 = document.getElementById("tooltip1");

ツールチップが表示される要素に mouseover イベントリスナを設定します。
マウスがツールチップが表示される要素に重なったら、ツールチップの要素に表示位置の座標を設定します。座標値はツールチップが表示される要素の左上の位置から 右に32ピクセル、下に32ピクセルの場所に表示します。
また、classListプロパティに visible クラスを追加してスタイルを変更し、要素が画面に見える状態に変更します。
      elem1.addEventListener("mouseover", function () {
        ToolTip1.style.left = (elem1rect.left + 32)+"px";
        ToolTip1.style.top = (elem1rect.top + 32) + "px";
        ToolTip1.classList.add("visible");
      });

ツールチップが表示される要素に mouseleave イベントリスナを設定します。
マウスがツールチップが表示される要素から出たタイミングで、classList プロパティから visible クラスを削除して、要素が画面に表示されない状態に変えます。
classListでクラスを動的に設定する方法の詳細についてはこちらの記事を参照してください。
      elem1.addEventListener("mouseleave", function () {
        ToolTip1.classList.remove("visible");
      });

CSS

CSSファイルのToolTipWindowクラスでポップアップ表示されるツールチップのスタイルを設定します。 今回は背景の透過度を90%に設定し、角丸長方形の領域とします。要素の透明度の設定方法はこちらの記事を参照してください。 また、領域の角を丸くするスタイルについてはこちらの記事をを参照してください。
visibility: hidden; を設定しデフォルトでは非表示のスタイルにします。
.ToolTipWindow {
  color: #FFFFFF;
  background-color: #3d3d3d;
  border: none;
  position: absolute;
  visibility: hidden;
  opacity: 0.9;
  padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  border-radius: 2px 2px 2px 2px / 2px 2px 2px 2px;
}

ToolTipWindowのvisibleサブクラスを記述します。visible サブクラスではvisibility: visible; を設定し要素が画面に表示される状態にします。
ToolTipWindowクラスの要素はデフォルトの状態では画面から非表示となり、visibleサブクラスが設定されたタイミングで画面に表示される動作になります。
  .ToolTipWindow.visible {
    visibility: visible;
  }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


テキストにマウスポインタを移動します。テキストにマウスポインタが重なるとポップアップでツールチップが表示されます。


別のテキストにマウスポインタを移動すると、ポップアップが消え、別のポップアップが表示されます。



マウスポインタがテキストと重ならない状態になると、ポップアップは非表示になります。

プログラム例:ツールチップが表示されるまでの遅延表示を入れる

先ほどのコードでツールチップの表示ができましたが、マウスポインタがテキストに重なるとすぐに表示されてしまうため、マウスがテキストを横切っただけでツールチップが表示されてしまい目障りです。テキストを横切っただけではツールチップのポップアップが表示されないように、マウスがツールチップの要素に重なってから、遅延してツールチップのウィンドウを表示する動作にします。

コード

下記のCSS、HTMLファイルを作成します。
tooltip-simple-delay.css
p {
  border:1px solid #ff6a00;
}

.ToolTipWindow {
  color: #FFFFFF;
  background-color: #3d3d3d;
  border: none;
  position: absolute;
  opacity: 0.9;
  padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  border-radius: 2px 2px 2px 2px / 2px 2px 2px 2px;
  visibility: hidden;
  transition-duration: 0s;
  transition-delay: 1.0s;
  transition-timing-function: linear;
}

  .ToolTipWindow.visible {
    visibility: visible;
  }
tooltip-simple-delay.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="tooltip-simple-delay.css" />

  <script type="text/javascript">
    window.addEventListener("load", function () {

      var elem1 = this.document.getElementById("text1");
      var elem1rect = elem1.getBoundingClientRect();
      var ToolTip1 = document.getElementById("tooltip1");

      elem1.addEventListener("mouseover", function () {
        ToolTip1.style.left = (elem1rect.left+32)+"px";
        ToolTip1.style.top = (elem1rect.top + 32) + "px";
        ToolTip1.classList.add("visible");
      });
      elem1.addEventListener("mouseleave", function () {
        ToolTip1.classList.remove("visible");
      });

      var elem2 = this.document.getElementById("text2");
      var elem2rect = elem2.getBoundingClientRect();
      var ToolTip2 = document.getElementById("tooltip2");
      elem2.addEventListener("mouseover", function () {
        ToolTip2.style.left = (elem2rect.left + 32) + "px";
        ToolTip2.style.top = (elem2rect.top + 32) + "px";
        ToolTip2.classList.add("visible");
      });
      elem2.addEventListener("mouseleave", function () {
        ToolTip2.classList.remove("visible");
      });

      var elem3 = this.document.getElementById("text3");
      var elem3rect = elem3.getBoundingClientRect();
      var ToolTip3 = document.getElementById("tooltip3");
      elem3.addEventListener("mouseover", function () {
        ToolTip3.style.left = (elem3rect.left + 32) + "px";
        ToolTip3.style.top = (elem3rect.top + 32) + "px";
        ToolTip3.classList.add("visible");
      });
      elem3.addEventListener("mouseleave", function () {
        ToolTip3.classList.remove("visible");
      });

    })
  </script>
</head>
<body>
  <p>
    <span id="text1" aria-describedby="tt1">ぺんキー</span><br />
    <span id="text2" aria-describedby="tt2">らくキャ</span><br />
    <span id="text3" aria-describedby="tt3">しくケー</span><br />
  </p>

  <span id="tooltip1" class="ToolTipWindow" aria-hidden="true">ぺんぎんクッキー</span>
  <span id="tooltip2" class="ToolTipWindow" aria-hidden="true">らくだキャラメル</span>
  <span id="tooltip3" class="ToolTipWindow" aria-hidden="true">しろくまケーキ</span>
</body>
</html>

解説

HTML/JavaScript

HTML, JavaScript のコードは先の例と同じコードです。

CSS

ToolTipWindow クラスのスタイル記述を変更しています。
.ToolTipWindow {
  color: #FFFFFF;
  background-color: #3d3d3d;
  border: none;
  position: absolute;
  opacity: 0.9;
  padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  border-radius: 2px 2px 2px 2px / 2px 2px 2px 2px;
  visibility: hidden;
  transition-duration: 0s;
  transition-delay: 1.0s;
  transition-timing-function: linear;
}

transition-delay プロパティで 1.0秒のディレイを設定しています。マウスポインタが要素に重なってから1秒後にスタイルの変化が始まります。
  transition-delay: 1.0s;

transition-duration と transition-duration を設定しています。 transition-duration を0秒に設定しており、 アニメーションせずに0秒で変更後のスタイルに変化します。
  transition-duration: 0s;
  transition-timing-function: linear;

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


テキストの上にマウスポインタを移動します。マウスポインタがテキストに重なって1秒ほど経過すると、下図のツールチップの枠が表示されます。


マウスポインタがテキストから出ると1秒ほど経過してツールチップが非表示になります。

プログラム例:遅延表示とポップアップ時のアニメーション

先に紹介した遅延表示とポップアップ時のアニメーションを実装します。

コード

下記のCSS、HTMLファイルを作成します。
tooltip-simple-delay-animation.css
p {
  border:1px solid #ff6a00;
}

.ToolTipWindow {
  color: #FFFFFF;
  background-color: #3d3d3d;
  border: none;
  position: absolute;
  opacity: 0.9;
  padding: 0.6rem 0.6rem 0.6rem 0.6rem;
  border-radius: 2px 2px 2px 2px / 2px 2px 2px 2px;
  visibility: hidden;
  transition-duration: 0.1s;
  transition-delay: 1.0s;
  transition-timing-function: linear;
  transform: scale3d(0,0,0);
}

  .ToolTipWindow.visible {
    visibility: visible;
    transform:scale3d(1,1,1);
  }
tooltip-simple-delay-animation.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="tooltip-simple-delay-animation.css" />

  <script type="text/javascript">
    window.addEventListener("load", function () {

      var elem1 = this.document.getElementById("text1");
      var elem1rect = elem1.getBoundingClientRect();
      var ToolTip1 = document.getElementById("tooltip1");

      elem1.addEventListener("mouseover", function () {
        ToolTip1.style.left = (elem1rect.left+32)+"px";
        ToolTip1.style.top = (elem1rect.top + 32) + "px";
        ToolTip1.classList.add("visible");
      });
      elem1.addEventListener("mouseleave", function () {
        ToolTip1.classList.remove("visible");
      });

      var elem2 = this.document.getElementById("text2");
      var elem2rect = elem2.getBoundingClientRect();
      var ToolTip2 = document.getElementById("tooltip2");
      elem2.addEventListener("mouseover", function () {
        ToolTip2.style.left = (elem2rect.left + 32) + "px";
        ToolTip2.style.top = (elem2rect.top + 32) + "px";
        ToolTip2.classList.add("visible");
      });
      elem2.addEventListener("mouseleave", function () {
        ToolTip2.classList.remove("visible");
      });

      var elem3 = this.document.getElementById("text3");
      var elem3rect = elem3.getBoundingClientRect();
      var ToolTip3 = document.getElementById("tooltip3");
      elem3.addEventListener("mouseover", function () {
        ToolTip3.style.left = (elem3rect.left + 32) + "px";
        ToolTip3.style.top = (elem3rect.top + 32) + "px";
        ToolTip3.classList.add("visible");
      });
      elem3.addEventListener("mouseleave", function () {
        ToolTip3.classList.remove("visible");
      });

    })
  </script>
</head>
<body>
  <p>
    <span id="text1" aria-describedby="tt1">ぺんキー</span><br />
    <span id="text2" aria-describedby="tt2">らくキャ</span><br />
    <span id="text3" aria-describedby="tt3">しくケー</span><br />
  </p>

  <span id="tooltip1" class="ToolTipWindow" aria-hidden="true">ぺんぎんクッキー</span>
  <span id="tooltip2" class="ToolTipWindow" aria-hidden="true">らくだキャラメル</span>
  <span id="tooltip3" class="ToolTipWindow" aria-hidden="true">しろくまケーキ</span>
</body>
</html>

解説

HTML/JavaScript

HTML, JavaScript のコードは先の例と同じコードです。

CSS

ToolTipWindow クラスのスタイル記述を変更しています。
transition-durationを設定しアニメーションの時間を設定します。今回は 0.1s を指定しますので、0.1秒で開始状態から終了状態へアニメーションにより変化します。
transform: scale3d(0,0,0); によりスケールを0に指定して、サイズを0倍に設定し見えない状態に変形します。
.ToolTipWindow {
  color: #FFFFFF;
  background-color: #3d3d3d;
  border: none;
  position: absolute;
  opacity: 0.9;
  padding: 0.6rem 0.6rem 0.6rem 0.6rem;
  border-radius: 2px 2px 2px 2px / 2px 2px 2px 2px;
  visibility: hidden;
  transition-duration: 0.1s;
  transition-delay: 1.0s;
  transition-timing-function: linear;
  transform: scale3d(0,0,0);
}

visible サブクラスでは transform: scale3d(1,1,1); を指定して本来の大きさに変形します。visible クラスが追加されると、 ツールチップの枠が、小さいサイズから0.1秒かけて拡大して本来の大きさで表示される動作になります。
  .ToolTipWindow.visible {
    visibility: visible;
    transform:scale3d(1,1,1);
  }

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のウィンドウが表示されます。


テキストの上にマウスポインタを移動します。マウスポインタが重なって1秒ほどすると、ツールチップの枠が拡大するアニメーションで表示されます。




著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2021-03-01
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.