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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ブログなどで便利に使えるTooltip(漫画風ふきだし)を作ってみました。
 

Tooltipライブラリもあるが、javascriptで行う為、設定が若干手間がかかるのを、CSS読み込みとclass名の設定だけでセットできるようにしてみました。
 

ちなみに、tooltipで表示する文言は、対象エレメントに「data-msg」という属性をそのまま表示できるようにしたので、見た目を汚さずにセットできるようにしてあります。

ソースコード

サンプル用のindex.htmlとライブラリ用のcssファイルを載せておきます。
 

使い方と解説

index.htmlソースを見るとわかりますが、上下左右の4方向にtooltipを出し分けるようにしています。
 

出し分けは下記クラス名を対象のタグにセットするだけです。
 

上に表示 : 「tooltip-top」
下に表示 : 「tooltip-bottom」
右に表示 : 「tooltip-right」
左に表示 : 「tooltip-left」
 

tooltipは文字数に応じて変動します。
※改行をしたい場合は、文字列の中で実際に改行させて使用して下さい。(tooltip-left参照)
 

対象タグはposition:relative;のスタイルが適用されるので、既存でabsoluteやfixedの要素になっている場合は、内側にネストさせて行う仕組みを作る必要があります。
 

tiiltip内に画像を表示したい場合は今回のバージョンでは対応していません。
こういう場合はJSで対応する必要があります。

サンプル

Leave a Reply

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