Web’Notes

CSSで作るツールチップ

Freebies - Firefox style Transparent Tool Tips (PSD) By: The Open Dept.

少ない表示領域を補うためや、ページをスッキリされる手段としてツールチップは良く利用されます。

jQueryやjavascriptを利用したリッチなツールチップのプラグインは良く見かけますが、今回はCSSのみでツールチップを実現してみました。

ツールチップはCSS3を利用してフキダシようにしたものとIE8以下のモダンブラウザでも動作する2種類を作成したので作り方を紹介します。

1. フキダシのようなツールチップ
2. IE8以下でも動作するツールチップ

フキダシのようなツールチップ

完成形としては、以下のようになります。

<div class="tooltip1">マウスを上にのせて下さい
<span>
サンプル
<br />
フキダシのようなツールチップ
</span>
</div>

/* 表示文字の装飾 */
div.tooltip1{
    color: #555;
    display: inline-block;                        /* インライン要素化 */
    border-bottom:dashed 1px #555;    /* 下線を引く */
}

/* ツールチップ部分を隠す */
div.tooltip1 span {
    display: none;
}

/* マウスオーバー */
div.tooltip1:hover {
    position: relative;
    color: #333;
}

/* マウスオーバー時にツールチップを表示 */
div.tooltip1:hover span {
    display: block;                  /* ボックス要素にする */
    position: absolute;            /* relativeからの絶対位置 */
    top: 25px;
    font-size: 90%;
    color: #fff;
    background-color: #51A2C1;
    width: 205px;
    padding: 5px;
    border-radius:3px;
    z-index:100;
}

/* フキダシ部分を作成 */
div.tooltip1 span:before{
    content:''; 
    display:block; 
    position:absolute;                         /* relativeからの絶対位置 */
    height:0; 
    width:0; 
    top:-13px; 
    left:15px;
    border:13px transparent solid; 
    border-right-width:0; 
    border-left-color:#51A2C1; 
    transform:rotate(270deg);            /* 傾きをつける */
    -webkit-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    z-index:100;
}

CSSの全体はこのようになります。まず、全体を囲っているdivタグを「display: inline-block; 」でブロック要素からをインライン要素に変更します。ブロック要素のまま何もしなければ「width:100%」の状態になるため文字の横の何もない部分にカーソルを合わせてもツールチップが出てしまいます。

/* ツールチップ部分を隠す */
div.tooltip1 span {
    display: none;
}

• position:「static」「absolute」「relative」「fixed」の使い方

/* マウスオーバー */
div.tooltip1:hover {
    position: relative;

/* マウスオーバー時にツールチップを表示 */
div.tooltip1:hover span {
    display: block;                  /* ボックス要素にする */
    position: absolute;            /* relativeからの絶対位置 */
    top: 25px;

• CSSの擬似要素「:before」「:after」の使い方

/* フキダシ部分を作成 */
div.tooltip1 span:before{
    content:''; 

IE8以下でも動作するツールチップ

<div class="tooltip1">マウスを上にのせて下さい
<span>
サンプル
<br />
フキダシのようなツールチップ
</span>
</div>

/* 表示文字の装飾 */
div.tooltip2{
    color: #555;
    display: inline-block;                        /* インライン要素化 */
    border-bottom:dashed 1px #555;    /* 下線を引く */
}

/* ツールチップ部分を隠す */
div.tooltip2 span {
    display: none;
}

/* マウスオーバー */
div.tooltip2:hover {
    position: relative;
    color: #333;
}

/* マウスオーバー時にツールチップを表示 */
div.tooltip2:hover span {
    display: block;                  /* ボックス要素にする */
    position: absolute;            /* relativeからの絶対位置 */
    top: 20px;
    background-color: #444;
    padding: 5px;
    width: 300px;
    color: #fff;
    font-size: 90%;
    z-index: 100;
}

IE8以下のブラウザで動作するツールチップはこのようになります。

ツールチップを表示しているロジックは全く同じで、マウスオーバー時に「display: block;」を指定し、「display: none;」で消した要素を表示しています。

ただし、IE8以下でフキダシの「▲」部分を実現するときは、画像を使用する以外の方法が無いため、ここでは単純なボックスの表示のみとしています。

CSS CSS, Design, HTML, デザイン