ツールチップが必要になったので最も簡単な方法をまとめました。
「ホバー(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;
}
.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>
<span class="tooltiptext">ツールチップ</span>
</div>
<p>マウスカーソルを
<span class="tooltip">ここ
<span class="tooltiptext">ツールチップ</span>
</span>
に載せる。
</p>
コメント