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

2018年2月5日

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

ブログなどで便利に使える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で対応する必要があります。

サンプル

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

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。