CSSでツールチップ（Tooltip）を自作する方法
Contents
CSSでツールチップ（Tooltip）を自作する方法
サンプル
- デフォルト ツールチップ
- 上部 ツールチップ
- 下部 ツールチップ
- 左側 ツールチップ
- 右側 ツールチップ
- リンク ツールチップ
-
DIV領域 ツールチップ
-
画像
ツールチップ
デモ
実装方法
スタイルシート定義
<style type="text/css">
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #ccc;
color: #006080;
}
/*ツールチップテキストの定義 */
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
width: 120px;
background-color: #111;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
z-index: 1;
opacity: 0;
transition: opacity .6s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* 上部表示 */
.tooltip .tooltiptext-top {
visibility: hidden;
width: 120px;
background-color: #111;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 130%;
left: 50%;
margin-left: -60px;
}
/* 矢印の定義 */
.tooltip .tooltiptext-top::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext-top {
visibility: visible;
}
/* 下部表示 */
.tooltip .tooltiptext-bottom {
visibility: hidden;
width: 120px;
background-color: #111;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
/* 矢印の定義 */
.tooltip .tooltiptext-bottom::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext-bottom {
visibility: visible;
}
/* 右側表示 */
.tooltip .tooltiptext-right {
visibility: hidden;
width: 120px;
background-color: #111;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
/* 矢印の定義 */
.tooltip .tooltiptext-right::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext-right {
visibility: visible;
}
/* 左側表示 */
.tooltip .tooltiptext-left {
visibility: hidden;
width: 120px;
background-color: #111;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext-left {
visibility: visible;
}
</style>まず、スタイルシート定義をします。これで、ツールチップの定義完了です。
HTMLマークアップ
この定義したスタイルシートを以下のように定義するとツールチップを設定できます。
まず、ツールチップを設定したいオブジェクトを準備します。ここではリンク（アンカータグ）とします。
<a class="tooltip" href="#">リンク
...
</a>ツールチップを設定したいオブジェクトにはまず、CSSクラス「tooltip」を設定します。
次にツールチップをその対象オブジェクト内に設定します。
<a class="tooltip" href="#">リンク
<span class="tooltiptext">ツールチップ</span>
</a>ツールチップを設定したいオブジェクト内にspanタグでツールチップ文字列を設定します。その際、spanタグのCSSクラスとして「tooltiptext」クラスを適用してください。
画像（img）にツールチップを適用するには？
このCSSクラスでは、画像（img）には、ツールチップを適用できません。imgタグ内にspanタグを定義できないからです。その場合の回避策としては、imgタグをdivタグなどで囲い、その中にツールチップテキストを定義すれば、対応できるかと思います。
<div class="tooltip ">
<img src="(画像URI)" />
<span class="tooltiptext">ツールチップ</span>
</div>ツールチップ配置
デフォルトのツールチップ定義「tooltiptext」クラス以外に、ツールチップの配置位置を定義したクラスも用意してあります。
上部表示
クラス「tooltiptext-top」を適用すると上部にツールチップが表示されます。
<span class="tooltip ">上部
<span class="tooltiptext tooltiptext-top">ツールチップ</span>
</span>下部表示
クラス「tooltiptext-bottom」を適用すると下部にツールチップが表示されます。
<span class="tooltip ">下部
<span class="tooltiptext tooltiptext-bottom">ツールチップ</span>
</span>左側表示
クラス「tooltiptext-left」を適用すると左側にツールチップが表示されます。
<span class="tooltip ">左側
<span class="tooltiptext tooltiptext-left">ツールチップ</span>
</span>右側表示
クラス「tooltiptext-right」を適用すると左側にツールチップが表示されます。
<span class="tooltip ">右側
<span class="tooltiptext tooltiptext-right">ツールチップ</span>
</span>ご参考
参考ページ
この記事を作成するにあたり以下のページを参考にしました。
