ツールチップtooltip（CSSのみ）

2021・06・17

＊CSSのみで作成されているツールチップサンプルです＊

CSSでは通常、クリックイベントをJavaScriptのようには制御できませんが、今回は:focusの疑似クラスを用いてCSSのみで実装してみました。

pポイントは、本来はfocusが効かない要素であるspanタグに、tabindex=”0″を指定することで、focusを効かせています。
また、下線部以外をクリックすることでfocusが外れるよう、親要素（divタグ）にもtabindex=”0″を指定しています。

吹き出しの出現は、spanタグのdata-descr属性の値に説明文を入力しておき、:focus::after（疑似クラス＋疑似要素）をセレクタにして、CSSのcontentプロパティの値に、attr(data-descr)を値として設定しています。

あえて疑似クラスを:hoverではなく:focusにすることで、スマホなどのデバイスからでもタップでツールチップを表示・非表示させることができます。

主な使用機能：HTML（data-descr属性）・CSS

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title></title>
    <style>
    .sample-tooltip-box p {
      margin-block-start: 0;
      margin-block-end: 0;
    }
    .sample-tooltip-box:focus  {
      outline:none !important;
    }
    .sample-tooltip-box {
      position: relative;
      line-height: 1.3;
      margin: 50px auto;
    }
    .sample-tooltip-box::before {
      content:"❣";
      width: fit-content;
      font-size: 2rem;
      color: red;
      padding: 5px 20px;
      background-color: floralwhite;
      border: solid darkblue;
      border-radius: 100%;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      top: -37px;
    }
    .sample-tooltip {
      width: 50%;
      min-width: 200px;
      margin: 3rem auto;
      font-size:1.3rem;
      padding: 2rem;
      border: solid;
      border-radius: 100px / 200px;
      box-shadow: 2px 5px 2px grey;
      outline: dashed grey;
      outline-offset: 16px;
      background-color: ghostwhite;
    }
    .sample-tooltip span[data-descr] {
      position: relative;
      text-decoration: underline;
      color: darkblue;
      cursor: help;
    }
    .sample-tooltip span[data-descr]:focus::after {
      content: attr(data-descr);
      position: absolute;
      right: 0;
      top: 1.3rem;
      min-width :100px;
      font-size:.75rem;
      z-index:1;
      background :lightyellow;
      padding: 7px;
      color: black;
    }
    @media screen and (max-width:765px) {
      .sample-tooltip {
        font-size: .85rem;
      }
    }
    </style>
  </head>
  <body>
    <div class="sample-tooltip-box" tabindex="0">
      <p class="sample-tooltip" tabindex="0">この文章には<span data-descr="tooltipとは、フキダシの説明挿入のことです。" tabindex="0">tooltip</span>が採用されています。<br>tooltipって何だろう？と思う方は下線が引かれた単語を<span data-descr="タップでも可" tabindex="0">クリック</span>してみて下さい。</p>
    </div>
</body>
</html>

« 前の記事へ次の記事へ »