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

CSSのbottomプロパティを使って上向き（トップ）ツールチップを実装する方法

Webページにツールチップを実装する際、テキストやボタンの上部に表示されるツールチップ（トップツールチップ）を作りたいケースはよくあります。

上向きのツールチップを設定するには、CSSのbottomプロパティを使用します。ポイントとなるのは、ツールチップ要素にbottom: 100%

実装のポイント

  • bottom: 100% … ツールチップを親要素のすぐ上に配置する
  • position: relative … 親要素に指定し、ツールチップの基準位置とする
  • position: absolute … ツールチップ本体に指定し、自由な位置に配置できるようにする
  • :hover … マウスカーソルが乗ったときにvisibility: visibleでツールチップを表示する

コード例

以下のコードを実行すると、テキストにマウスカーソルを合わせたときに、その上部へツールチップが表示されます。

<!DOCTYPE html>
<html>
   <style>
      .mytooltip .mytext {
         visibility: hidden;
         width: 140px;
         background-color: blue;
         color: #fff;
         z-index: 1;
         bottom: 100%;
         left: 60%;
         margin-left: -90px;
         text-align: center;
         border-radius: 6px;
         padding: 5px 0;
         position: absolute;
      }
      .mytooltip {
         position: relative;
         display: inline-block;
         margin-top: 50px;
      }
      .mytooltip:hover .mytext {
         visibility: visible;
      }
   </style>
   <body>
      <div class = "mytooltip">ここにマウスカーソルを合わせてください
         <span class = "mytext"> ツールチップのテキスト</span>
      </div>
   </body>
</html>

コードの解説

1. ツールチップ本体のスタイル（.mytext）

visibility: hiddenで初期状態では非表示にし、背景色・文字色・角丸（border-radius）などを設定して見やすいデザインにしています。z-index: 1を指定することで、他の要素より手前に表示されます。

2. 配置の指定

bottom: 100%がこの記事のキモです。これによりツールチップは親要素の上側に表示されます。また、left: 60%とmargin-left: -90pxを組み合わせることで、水平方向の位置を微調整しています。

3. ホバー時の表示切り替え

.mytooltip:hover .mytext { visibility: visible; }によって、マウスカーソルが親要素に乗った瞬間にツールチップが表示される仕組みです。JavaScript不要で、CSSだけで完結するシンプルな実装方法です。

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

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

  2. CSSのtopプロパティをアニメーションさせる方法

    CSSでは、topプロパティにも@keyframesを使ったアニメーションを適用できます。要素を上下に滑らかに移動させたい場合などに活用できるテクニックです。以下は、topプロパティをアニメーションさせて、オレンジ色のボックスが下方向へ移動するサンプルコードです。サンプルコード<!DOCTYPE html> <html>    <head>       <style>          div {       &nbs