CSSで作るツールチップ

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

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

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

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

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

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

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

マウスを上にのせて下さい
サンプル

フキダシのようなツールチップ
HTML
<div class="tooltip1">マウスを上にのせて下さい
<span>
サンプル
<br />
フキダシのようなツールチップ
</span>
</div>
HTMLのソースはこのように、divタグの中にspanタグを入れます。divタグの内容はそのまま表示し、spanタグの内容はツールチップとして表示されます。
CSS
/* 表示文字の装飾 */
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%」の状態になるため文字の横の何もない部分にカーソルを合わせてもツールチップが出てしまいます。

次に、「class=”tooltip1″」の子要素のspanタグを「display: none;」で隠します。
/* ツールチップ部分を隠す */
div.tooltip1 span {
    display: none;
}
マウスオーバー時には「relative」を設定します。これで子要素(spanタグ)に「absolute」を設定すれば、「relative」からの絶対位置が設定できます
/* マウスオーバー */
div.tooltip1:hover {
    position: relative;
子要素にも同様に、マウスオーバー時にCSSを設定します。「display: block;」で隠した要素を表示し「position: absolute;」で親要素のdivタグから「top: 25px」の位置を設定します。
/* マウスオーバー時にツールチップを表示 */
div.tooltip1:hover span {
    display: block;                  /* ボックス要素にする */
    position: absolute;            /* relativeからの絶対位置 */
    top: 25px;
最後に擬似要素「before」で要素を作成し、フキダシ部分を作成します。
/* フキダシ部分を作成 */
div.tooltip1 span:before{
    content:''; 

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

マウスを上にのせて下さい
サンプル

IE8以下でも動作するツールチップ
色や見た目は変えていますが、実はほぼ上の フキダシのようなツールチップ と同じCSSでIE8以下の対応が実現できます。
HTML
<div class="tooltip1">マウスを上にのせて下さい
<span>
サンプル
<br />
フキダシのようなツールチップ
</span>
</div>
CSS
/* 表示文字の装飾 */
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以下でフキダシの「▲」部分を実現するときは、画像を使用する以外の方法が無いため、ここでは単純なボックスの表示のみとしています。

divider

Trackback URL

http://webnonotes.com/css/tooltip/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>