CSS3を使ったツールチップ

CSS

CSS3を使ってアニメーションするツールチップを実装するコード

これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーションするツールチップを実装することができるコードです。指定した要素にホバーするとツールチップがヒョコッと出てきます。CSSだけでできるのでサイトにちょっとしたアクセントを入れたい時なんかに役立ちそうです。

[ads_center]

やり方

こんな感じのツールチップを実装することができます。

CSS3のツールチップ
CSS3のツールチップ

CSSのコードは以下。

.tooltip-container {
    /* Forces tooltip to be relative to the element, not the page */
    position:relative;  
    cursor:help;
}
 
.tooltip {
    display:block;
    position:absolute;
    width:150px;
    padding:5px 15px;
    left:50%;
    bottom:25px;
    margin-left:-95px;
    /* Tooltip Style */
    color:#fff;
    border:2px solid rgba(34,34,34,0.9);
    background:rgba(51,51,51,0.9);
    text-align:center;
    border-radius:3px;
    /* Tooltip Style */
    opacity:0;
    box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -0-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -o-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
    /* Reset tooltip, to not use container styling */
    font-size:14px;
    font-weight:normal;
    font-style:normal;
}
 
.tooltip:before, .tooltip:after{
    content:"";
    position:absolute;
    bottom:-13px;
    left:50%;
    margin-left:-9px;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid rgba(0,0,0,0.1);
}
.tooltip:after{
    bottom:-12px;
    margin-left:-10px;
    border-top:10px solid rgba(34,34,34,0.9);
}
 
.tooltip-container:hover .tooltip, a:hover .tooltip {
    /* Makes the Tooltip slightly transparent, Lets the barely see though it */
    opacity:0.9;
    /* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
}
 
/* Custom Classes */
.tooltip-style1 {
    color:#000;
    border:2px solid #fff;
    background:rgba(246,246,246,0.9);
    font-style:italic;
}
.tooltip-style1:after{
    border-top:10px solid #fff;
}

HTMLは以下のように記述します。

<i class="tooltip-container"><b>サンプル1</b><span class="tooltip">ツールチップ1</span></i>

<em class="tooltip-container"><b>サンプル2</b><span class="tooltip tooltip-style1">ツールチップ2</span></em>

tooltipというクラス名をつけた要素がホバー時にツールチップとして表示されます。

/ Animated Tooltip with CSS / apphp-snippets – Snipt

レスポンシブ制作に役立つiPhone・iPad・Macの表示確認ツール「Respondr」前のページ

25のアイス(氷)テクスチャの素材がとてもカッコイイ次のページアイステクスチャ

関連記事

  1. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  2. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  3. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  4. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  5. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  6. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP