元の要素を囲んで表示されるツールチップ

更新日
2017.07.28
作成日
2017.02.01

オンマウスやフォーカスで元のリンクを囲んで表示されるツールチップを CSS で実装します。

最近ちょこちょこ見かける元のリンクをポップアップの見出し部分にしたようなツールチップです。プロフィール詳細やフォローボタン、商品要約&カートボタンなど色々な所で使用出来そうですね。

デモ

デモページ

CSSコード

[ERROR] 読み込みファイルがありません

段落内で使用する場合はインライン要素でマークアップすると使用できます。

クリックで表示させたい場合はアクティブの判定を focus のみにするか、JavaScript を使用してクラスや属性を付けて判定するとよいですね!

.hdcard:focus .hdcard_detail { ... }