CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでテキストの左側にツールチップを表示する方法

CSSで左側に表示されるツールチップを作成する方法

マウスカーソルを重ねると補足説明がポップアップ表示される「ツールチップ」は、Webサイトのユーザビリティを高める便利なUI要素です。本記事では、CSSだけでテキストの左側にツールチップを表示させる方法を解説します。

ポイントはrightプロパティ

左側にツールチップを配置する鍵となるのが、CSSのrightプロパティです。right: 100%を指定すると、基準となる親要素の右端から要素の幅（100%）ぶんだけ左へずらした位置にツールチップが配置されます。これにより、テキストの左側に自然に吹き出しを表示できるのです。

サンプルコード

以下のコードでは、「Keep mouse cursor over me」というテキストにマウスカーソルを重ねると、その左側にオレンジ色のツールチップが表示されます。

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: orange;
         color: white;
         z-index: 1;
         top: -6px;
         right: 100%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-left: 150px;
      }
      .mytooltip:hover .mytext {
         visibility: visible;
      }
   </style>
   <body>
      <div class = "mytooltip">Keep mouse cursor over me
         <span class = "mytext"> My Tooltip text</span>
      </div>
   </body>
</html>

コードの解説

  • .mytooltip：position: relative;とdisplay: inline-block;を指定しており、ツールチップの配置基準となる親要素です。
  • .mytext：ツールチップ本体です。初期状態はvisibility: hidden;で非表示になっており、position: absolute;によって絶対配置されます。
  • right: 100%：ツールチップをテキストの左側に配置するための重要な指定です。top: -6px;により縦位置も微調整しています。
  • border-radius：角丸のデザインで見た目を柔らかくしています。
  • .mytooltip:hover .mytext：マウスカーソルを重ねた（hoverした）タイミングでvisibility: visible;に切り替わり、ツールチップが表示されます。

実行結果

このコードをブラウザで開き、テキスト部分にマウスカーソルを重ねてみてください。「My Tooltip text」と書かれたオレンジ色のツールチップが、テキストの左側に表示されます。

JavaScriptを使わず純粋なCSSだけで実装できるため、軽量かつメンテナンス性の高いツールチップを作成できます。表示位置を変えたい場合は、rightをleftやtop・bottomに置き換えることで、上下左右自由に調整可能です。

  1. CSSでツールチップの上部に矢印を追加する方法

    ツールチップの上部に矢印を追加するには、CSSのbottomプロパティを活用します。:after疑似要素と組み合わせることで、画像を使わずに三角形の矢印を簡単に作成できます。 実装例 以下のコードを実行すると、上部に矢印が付いたツールチップを表示できます。テキストの上にマウスカーソルを重ねると、ツールチップが現れる仕組みです。 <!DOCTYPE html> <html>    <style>       .mytooltip .mytext {         &nb

  2. CSSのfloatプロパティで要素をフロート(回り込み)させる方法

    CSSのfloatプロパティとはCSSのfloatプロパティは、ボックスやコンテンツを配置・整形するために使用されるプロパティです。開発者はfloatを活用することで、要素をコンテナの左側または右側に寄せて配置できます。floatプロパティには、以下のいずれかの値を指定できます。left − 要素がコンテナの左側に浮動しますright − 要素がコンテナの右側に浮動しますnone − 要素は浮動しません(デフォルト値)inherit − 親要素のfloat値を継承しますなお、floatを指定すると後続の要素が回り込むため、レイアウトによってはclearプロパティで回り込みを解除する必要がある点