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. Animated Transition Effects
  2. (cs)spinner

    CSS

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

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

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

    CSS

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

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

  4. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  5. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  6. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

最近の記事

  1. 広尾 スタバ
  2. 芳醇な香りのラムレーズンサンド
  3. Aモーニングセット
  4. 白トリュフの塩パンやメロンパンなど
  5. 東京都現代美術館

アーカイブ

PAGE TOP