簡単にツールチップを実現するには、title属性を使います。それでは物足りないならば、オリジナルのツールチップを用意しましょう。
JavaScriptが使えない場合もあるので、CSSだけで実装します。先ずは、ベーシックなツールチップを作ります。
CSSだけでオリジナルツールチップ作成
HTML で要素に属性を設定する
ツールチップは属性として提供されます。title属性はグローバル属性ですから、どの要素にも適応されます。
カスタムのツールチップの場合にも、属性として定義します。要素にはカスタムツールチップ属性を待たせます。
<span class="tooltip" data-tooltip="~text~">~text~</span>
span 要素に class 定義で tooltip 属性を持たせます。title に当る data-tooltip に表示させたいテキストを代入できるようにします。
CSS で機能を定義する
classの定義
.tooltip {
position: relative;
cursor: pointer;
}
ツールチップ本体のCSS定義です。表示位置とカーソル形状を定義しています。
※カーソル形状は、ツールチップ機能には直接関係せず、閲覧者へのお知らせ目的です。超シンプルで良い場合省略できます。
tooltip表示定義
.tooltip::after { /*疑似要素
content: attr(data-tooltip); /*表示データ箱
position: absolute; /*表示位置
top: 100%; /*↓形状
left: 0;
background: #333;
color: #fff;
padding: 2px 4px;
border-radius: 4px; /*↑形状
font-size: 15px; /*文字サイズ
white-space: pre-wrap;/*折り返しあり
opacity: 0; /*透明度0：隠しておく
pointer-events: none; /*ポインター無効
transform: translateY(4px); /*位置微調整
transition: opacity 0.2s ease; /*表示効果
}
.tooltip:hover::after {
opacity: 1;/*透明度1：出現させる
}
ツールチップ本体の見た目定義です。
「:hover」でカーソルが載った時に表示させます。
薄切りポテトのフライ
CSSプロパティ解説
data-属性
カスタムデータ属性。属性部分には、独自定義したclass名を書きます。
data-tooltip="表示するテキスト"で、 title="表示するテキスト" と同じ働きをします。
posision
プロパティ。要素のレイアウト方法を決めます。初期値は固定「static」です。「relativ」を指定すると、元の（要素）位置を基準に移動した位置に配置されます。
値
意味
absolute
絶対位置
fixed
固定
stickey
スクロールして固定
cursol
プロパティ。カーソルの見た目を決めます。
値
意味
default
矢印
pointer
手（👆）
text
｜（キャレット）
move
+
not-allowed
禁止マーク
wait
回る輪
crosshair
✛
::after
疑似要素。指定（ここではtooltip）要素の後にHTMLでは記述していないコンテンツを追加して表示させます。
前に追加する場合には、「::before」を使います。
content
疑似要素専用プロパティ。表示させるものを値として与えることができます。
値
意味
補足
”text"
文字列
文章、記号
attr(属性名)
属性値
title、data-～のみ
""
空文字
疑似要素の表示に必須
white-space
プロパティ。要素の中の空白や改行を制御します。
値
意味
空白
改行
折り返し
normal
初期値
→1
×
〇
nowrap
折り返し禁止
→1
×
×
pre
保持
保持
〇
×
pre-wrap
保持・折り返し
保持
〇
〇
pre-line
空白のみ圧縮
→1
〇
〇
折り返しには、改行位置に「 」を入れます。
opacity
プロパティ。要素の透明度を指定します。
値は透明度を1～0まで小数で指定します。0で完全透明、1で不透明になります。
pointer-events
プロパティ。ポインター操作の制御を行います。初期値は「auto」で可ですが、「none」で無効にします。
transform
プロパティ。要素を変形します。値には、関数を指定します。
translateY(4px)は、Y方向（4px +なので下）に移動させる関数です。
transision
プロパティ。変形の時間を調節して滑らかなアニメーション効果を演出します。
値は、間にスペースを空けて、効果を掛けるプロパティ、時間、イージング（関数）、遅延を指定します。
transision: opcity 0.5s ease-in-out 0.1s;
透明度を0.1秒後から0.5秒かけて始まりはゆっくり加速して再びゆっくり減速して終了させます。
:hover
疑似クラス。要素にマウスが載った時の動作を定義します。
要素:hover {
～定義～
}