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

最終更新日
2017.10.05

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

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

デモ

デモページ

CSSコード

.hdcard {
    position: relative;
    display: inline-block;
    outline: none;
    z-index: 0;
    transition: z-index .4s;
}
.hdcard:hover, .hdcard:focus {
    z-index: 2;
}
.hdcard_label {
    position: relative;
    display: inline-block;
    z-index: 1;
    line-height: 1em;
}
.hdcard_detail {
    display: block;
    position: absolute;
    /* ラベルが綺麗に入るようにマージンを調整 */
    margin-top: -8px;
    margin-left: -10px;
    margin-right: -10px;
    padding: 1.5em 0px 0px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 0px;
    max-height: 0px;
    top: 0px;
    /* min-widthより大きいサイズの場合用にleft,rightも指定 */
    left: 0;
    right: 0px;
    box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    opacity: 0;
    overflow: hidden;
    transform: scale(0.95);
    /* 消えてる途中に再表示させないように あったほうが多分イラっとしない */
    pointer-events: none;
    /* widthとheightはアニメ中ディレイさせる */
    transition: .4s opacity, .4s transform, 0s min-width .4s, 0s max-height .4s;
}
.hdcard:hover .hdcard_detail, .hdcard:focus .hdcard_detail {
    display: block;
    min-width: 200px;
    max-height: 500px;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition: .4s opacity, .4s transform, 0s min-width 0s, 0s max-height 0s;
}

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

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

.hdcard:focus .hdcard_detail { ... }