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

CSSでツールチップの左側に矢印を追加する方法

CSSでツールチップの左側に矢印を追加する方法

Webサイトでよく見かけるツールチップ（マウスオーバー時に表示される小さな吹き出し）には、矢印が付いていることが多くあります。矢印があることで、どの要素に対する補足説明なのかがひと目で分かり、ユーザーにとってより直感的なインターフェースになります。

本記事では、CSSのborderプロパティと:after疑似要素を組み合わせて、ツールチップの左側に矢印を表示する方法を解説します。

矢印の仕組み

CSSで矢印（三角形）を作る基本テクニックは、要素のボーダーを利用する方法です。幅と高さを持たない要素に太いボーダーを設定すると、各ボーダーが斜めに接するため、三角形のように見えます。ここでは4辺のうち右側のボーダーだけに色を付け、残りの3辺を透明にすることで、左向きの矢印を実現しています。

サンプルコード

以下のコードを実行すると、テキストにマウスカーソルを重ねたとき、その右側に現れるツールチップの左端に矢印が付いた状態で表示されます。

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         top: -5px;
         left: 110%;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-left: 50px;
      }
      .mytooltip .mytext:after {
         content: "";
         position: absolute;
         top: 50%;
         right: 100%;
         margin-top: -5px;
         border-width: 6px;
         border-style: solid;
         border-color: transparent blue transparent transparent;
      }
      .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; を指定することで、子要素の absolute 配置の基準になります。
  • .mytext：ツールチップ本体です。初期状態は visibility: hidden; で非表示になっており、left: 110% によって親要素の右側外に配置されます。
  • .mytext:after：矢印部分です。right: 100% でツールチップの左外側に位置づけ、border-color: transparent blue transparent transparent; により右辺だけを青く塗ることで、左向きの三角形（矢印）を描画しています。
  • :hover：マウスカーソルが親要素に乗ったタイミングで visibility: visible; に切り替わり、ツールチップが表示されます。

矢印の向きや位置を変えたい場合は、border-color で色を付ける辺と top / right / bottom / left の指定を変更するだけで簡単に調整できます。ぜひ自分のサイトに合わせてカスタマイズしてみてください。

  1. CSSでleftプロパティをアニメーションさせる方法

    CSSでleftプロパティをアニメーションさせたい場合は、@keyframesルールとanimationプロパティを組み合わせることで実現できます。要素をスムーズに横方向へ移動させる演出などに活用できる基本的なテクニックです。 leftプロパティをアニメーションさせる際のポイント leftプロパティは、要素がposition: absolute;やposition: relative;などの位置指定を行っている場合にのみ有効になります。そのため、アニメーション対象の要素には必ずpositionの設定を忘れずに行いましょう。 サンプルコード 以下のコードでは、5秒間のアニメーションを使用して、要

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

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