読者です 読者をやめる 読者になる 読者になる

とある地味なブログ

プログラミングとお絵かきに関する雑記。

CSS3の吹き出し(ツールチップ)実装

プログラミング CSS

javascriptを使用せず、CSS3のみでTooltipを実装します。

サンプル

コード

コード全体は sujoyu/balloon-annotation · GitHub に上げてあります。

.balloon-annotation {
    display: inline-block;
    color: #2785C0;
    cursor: default;
}

.balloon-annotation > .balloon-annotation-body {
    display: inline-block;
    visibility: hidden; /* フェードインアニメーションのため、display: none;は使いません */
    position: absolute;
    z-index: 100;
    margin: -16px 0 0 16px;
    padding: 16px 24px;
    border-radius:3px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    background-color: #2C3E50;
    max-width: 700px;
    color: #FFF;
    font-size: small;
    justify-content: center;
    opacity: 0; /* フェードアウトアニメーションのため、初期値は透過です */
  
  /* visibilityはopacityのアニメーション後に切り替えるためdelay 200msです */
    transition: opacity 200ms ease 0s, visibility 0ms linear 200ms; 
}

.balloon-annotation:hover > .balloon-annotation-body {
    visibility: visible;
    opacity: 1; /* フェードインアニメーションのため、ロールオーバー時は不透明です */

    /* visibilityはopacityのアニメーション前に切り替えるためdelay 0です */
    transition: opacity 300ms ease 0s, visibility 0ms linear;
}

/*
Balloon beak.
*/
.balloon-annotation > .balloon-annotation-body:before {
    display: inline-block;
    position: absolute;
    margin-left: -30px;
    border-width: 6px 6px 6px medium;
    border-style: solid solid solid none; /* borderの1辺だけをnoneにすると三角形になります */
    border-color: transparent #2C3E50;
    content: "";
}

ポイント

フェードイン、フェードアウトアニメーション

display: none;はアニメーションできません。
詳しくは、CSS - display: none; のDOMに対してtransitionを使う際の注意 - Qiita

そこで、visibilityを使います。

フェードイン(現れる時)は、visibilityをディレイ無しで適用して先に出現させます。 それから、opacityを 0 → 1 にアニメーションさせることで、フェードイン効果を表現します。

フェードアウトはその逆で、opacityを 1 → 0 にアニメーションさせた後、 visibilityを適用し(つまりディレイをアニメーションが終了している200msとする)、 フェードアウト効果を表現します。

吹き出しの三角形

borderの1辺をnoneにすることで、三角形を作ります。 noneにする辺を変えることで、三角形の向きを変えることができます。