ヘルプボタンや注釈に！CSSだけで作るフキダシ型ツールチップ

ツールチップとは、カーソルを合わせたときに出てくる用語解説などの小窓のことです。ポップアップヒントやバルーンメニューなどと呼ばれることも。

自分好みのを作ろうと思ってサンプルソースいじってたらそれなりに別物になったので置いときます。

CSSだけで作るフキダシ型ツールチップ

タイトルの通りです。用語にマウスオーバーすると出てくるポップアップウィンドウをCSSだけで作ります。主なポイントは次の通りです。

• 縁取りフキダシ
• バルーンが浮いてる感じにした
• マウスカーソル変えた

ちなみに作業環境はChrome49です。

デモ

これはツールチップのデモ(* ´ ω `)｛こんな感じでフキダシが出てきますです。

たとえば論説文の脚注代わりとして、専門用語ある特定の仕事や分野の間でのみ通用する言葉や用語群のこと。テクニカルタームとも。に付けたりすると親切かも知れませんね。

PCの場合はマウス-バーで、モバイルの場合はタップしてみてください。

HTML

【HTML】
これは<a href="#" class="toolTip">ツールチップのデモ<span>(* ´ ω `)｛こんな感じでフキダシが出てきます。マウスカーソルも変えてみました。</span></a>なのです。


<a> タグで全体を囲って <span> を入れ子にして使います。ルビタグみたいな感じで。

CSS

【CSS】
.toolTip{
position: relative; // 基準点
}
.toolTip span{
color: #333;
position: absolute;
display: block;
padding: 8px;
width: 150px;
top: 30px; // aタグ開始点からの相対位置
left: 0;
font-size: .9em;
line-height: 1.2em;
border: 3px solid #BCB;
border-radius: 10px;
background-color: #efffef;
box-shadow: 1px 1px 5px #CCC;
z-index: 0;
visibility: hidden;
}
.toolTip span:before {
position: absolute;
top: -8px; left: 25%; // フキダシ本体に対する三角形の開始位置
margin-left: -9px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 9px 9px 9px;
border-color: transparent transparent #efffef transparent;
z-index: 0;
}
.toolTip span:after {
content: "";
position: absolute;
top: -12px; left: 25%;
margin-left: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #BCB transparent;
z-index: -1;
}
.toolTip:hover{ cursor: help; }
.toolTip:hover span{
visibility: visible;
cursor: help;
z-index: 20; // 他のものより上に来るように
}


ツールチップ（ポップアップヘルプ）を改良してみた。 | CSS-EBLOG

おわりに

オリジナル感出すためにフキダシ型にしてみましたが、単なる四角いだけのほうがCSS的にはすっきりすると思います。(^^;