CSSだけでTooltipを表示するスニペット

2018年2月5日

CSS テクノロジー プログラミング

t f B! P L
ブログなどで便利に使えるTooltip(漫画風ふきだし)を作ってみました。 Tooltipライブラリもあるが、javascriptで行う為、設定が若干手間がかかるのを、CSS読み込みとclass名の設定だけでセットできるようにしてみました。 ちなみに、tooltipで表示する文言は、対象エレメントに「data-msg」という属性をそのまま表示できるようにしたので、見た目を汚さずにセットできるようにしてあります。

ソースコード

サンプル用のindex.htmlとライブラリ用のcssファイルを載せておきます。 <DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tooltip</title> <style> .element{ display:block; width:100px; height:100px; border:1px solid black; background-color:#DDD; margin:20px; margin-left:200px; } .tooltip1{ border:1px solid red; } </style> <link rel="stylesheet" href="tooltip.css"> </head> <body> <h1>Tooltip</h1> <div class="element tooltip-right" data-msg="右側にHELPを 表示します。"></div> <div class="element tooltip-left" data-msg="左側にHELPを表示します。"></div> <div class="element tooltip-top" data-msg="上側にHELPを表示します。"></div> <div class="element tooltip-bottom" data-msg="下側にHELPを表示します。"></div> </body> </html> .tooltip-right:hover{ opacity:0.7; cursor:help; position:relative; } .tooltip-right:hover:before{ content:attr(data-msg); display: inline-block; position: absolute; top : 0; left : calc(100% + 12px); font-size: 12px; color: white; background-color: #484848; min-width : 100px; max-width : 300px; width : auto; min-height: 16px; padding: 8px; border-radius:4px; white-space:pre; } .tooltip-right:hover:after{ content:""; display:block; position:absolute; height : 0; width : 0; top : calc(10% + 8px); left : calc(100% + 12px - 10px); border-right-width:0; border-style: solid; border-width: 12px 0 12px 12px; border-color: #484848 transparent transparent transparent; } .tooltip-left:hover{ opacity:0.7; cursor:help; position:relative; } .tooltip-left:hover:before{ content:attr(data-msg); display: block; position: absolute; top : 10%; right : calc(100% + 12px); font-size: 12px; color: white; background-color: #484848; min-width: 100px; max-width: 300px; min-height: 16px; padding: 8px; border-radius:4px; white-space:pre; } .tooltip-left:hover:after{ content:""; display:block; position:absolute; height : 0; width : 0; top : calc(10% + 8px); right : calc(100% + 12px - 10px); border-right-width:0; border-style: solid; border-width: 12px 12px 12px 0; border-color: #484848 transparent transparent transparent; } .tooltip-top:hover{ opacity:0.7; cursor:help; position:relative; } .tooltip-top:hover:before{ content:attr(data-msg); display: block; position: absolute; bottom : calc(100% + 12px); left : 4px; font-size: 12px; color: white; background-color: #484848; min-width: 100px; max-width: 300px; min-height: 16px; padding: 8px; border-radius:4px; white-space:pre; } .tooltip-top:hover:after{ content:""; display:block; position:absolute; height : 0; width : 0; bottom : calc(100% + 12px - 10px); left : calc(4px + 8px); border-right-width:0; border-style: solid; border-width: 0 12px 12px 12px; border-color: transparent #484848 transparent transparent; } .tooltip-bottom:hover{ opacity:0.7; cursor:help; position:relative; } .tooltip-bottom:hover:before{ content:attr(data-msg); display: block; position: absolute; top : calc(100% + 12px); left : 4px; font-size: 12px; color: white; background-color: #484848; min-width: 100px; max-width: 300px; min-height: 16px; padding: 8px; border-radius:4px; white-space:pre; } .tooltip-bottom:hover:after{ content:""; display:block; position:absolute; height : 0; width : 0; top : calc(100% + 12px - 10px); left : calc(4px + 8px); border-right-width:0; border-style: solid; border-width: 12px 12px 0 12px; border-color: transparent #484848 transparent transparent; }

使い方と解説

index.htmlソースを見るとわかりますが、上下左右の4方向にtooltipを出し分けるようにしています。 出し分けは下記クラス名を対象のタグにセットするだけです。 上に表示 : 「tooltip-top」 下に表示 : 「tooltip-bottom」 右に表示 : 「tooltip-right」 左に表示 : 「tooltip-left」 tooltipは文字数に応じて変動します。 ※改行をしたい場合は、文字列の中で実際に改行させて使用して下さい。(tooltip-left参照) 対象タグはposition:relative;のスタイルが適用されるので、既存でabsoluteやfixedの要素になっている場合は、内側にネストさせて行う仕組みを作る必要があります。 tooltip内に画像を表示したい場合は今回のバージョンでは対応していません。 こういう場合はJSで対応する必要があります。

サンプル

※それぞれの四角にマウスカーソルを乗せてみてください。

このブログを検索

プロフィール

自分の写真
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出で、出来高は無限大です。

ブログ アーカイブ

QooQ