[CSS]これは使ってみたい、繊細で美しいツールチップを実装するチュートリアル

CSS3アニメーションを使った繊細で美しいツールチップを実装するチュートリアルを紹介します。

How to create animated tooltips with CSS3

[ad#ad-2]

• デモ
• 実装

デモ

デモはCSS3アニメーション、擬似要素を使用しているため、Firefox, Chrome, Safariでご覧ください。

デモページ

[ad#ad-2]

デモでは4種類の美しいツールチップが楽しめます。

Demo 1

上部かスライドのアニメーションで、ツールチップを少しずつはっきりと表示します。

Demo 2

サークル状のツールチップを拡大しながら、少しずつはっきりと表示します。

Demo 3

拡大・回転を伴ったアニメーションで、ツールチップを表示します。

Demo 4

最初にぼんやりと大きなツールチップが表示され、縮小とともにはっきりとツールチップを表示します。

実装

HTML

ツールチップはリスト要素で、各アイテムはa要素で実装されています。

<ul class="tt-wrapper">
    <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
    <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
    <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
    <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
    <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
    <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
</ul>

CSS

スタイルシートはDemo 1を例に、実装方法を紹介します。

まずは、ベースとなるリスト要素を「float:left;」で並べ、a要素は次のようなスタイルを与えます。

.tt-wrapper li a{
    display: block;
    width: 68px;
    height: 70px;
    margin: 0 2px;
    outline: none;
    background: transparent url(../images/icons.png) no-repeat top left;
    position: relative;
}

各アイテムの背景は、それぞれ異なる位置に配置します。

.tt-wrapper li .tt-gplus{
    background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
    background-position: -68px 0px;
}
.tt-wrapper li .tt-dribbble{
    background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
    background-position: -204px 0px;
}
.tt-wrapper li .tt-linkedin{
    background-position: -272px 0px;
}
.tt-wrapper li .tt-forrst{
    background-position: -340px 0px;
}

ツールチップのポイントとなるspan要素のスタイルです。「opacity:0;」で不透明度を0に設定し、デフォルト時にはツールチップを隠します。ツールチップはアニメーションで少しずつはっきりと表示します。

.tt-wrapper li a span{
    width: 100px;
    height: auto;
    line-height: 20px;
    padding: 10px;
    left: 50%;
    margin-left: -64px;
    font-family: 'Alegreya SC', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #719DAB;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 4px solid #fff;
    background: rgba(255,255,255,0.3);
    text-indent: 0px;
    border-radius: 5px;
    position: absolute;
    pointer-events: none;
    bottom: 100px;
    opacity: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
}

ツールチップの小さいポインタは擬似要素で作成しています。ここでは小さい三角形を作ります。

.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    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);
}

三角をツールチップと合体させるため、接点のボーダーをホワイトにします。

.tt-wrapper li a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}

最後に、ホバー時にspan要素を上部からアニメーションでスライドし、少しずつはっきりと表示させます。

.tt-wrapper li a:hover span{
    opacity: 0.9;
    bottom: 70px;
}