CSSだけでツールチップを実現する方法

Pocket

ツールチップが必要になったので最も簡単な方法をまとめました。
「ホバー(hover)」は「空中に停止する」という意味です。ヘリコプターのホバリングはこの意味です。ホバークラフトも同様です。
ウェブページではマウスカーソルが文字や図形の上にある状態を指します。
セレクタとして「:hover」という疑似クラスを使用するとホバー状態のときのスタイルを変えることができます。ツールチップは、内容を非表示にしておき、ホバー状態のときだけ表示するという仕組みで実現されます。JavaScriptは不要です。

CSS

/* ツールチップが表示される元の部分 */
.tooltip {
  position: relative;
  display: inline-block;
}
/* ツールチップの文字列 */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #eee;
  text-align: center;
  /* ツールチップの位置 */
  position: absolute;
  z-index: 1;
  bottom: 120%;
  left: 50%;
  margin-left: -100px;
}
/* ツールチップの表示 */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

HTML

<div class="tooltip">マウスカーソルを載せる。
  <span class="tooltiptext">ツールチップ</span>
</div>
<p>マウスカーソルを
  <span class="tooltip">ここ
    <span class="tooltiptext">ツールチップ</span>
  </span>
  に載せる。
</p>

[ 2018年9月4日 | カテゴリー: デジタル | タグ: ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報