CSSのみでふわっと浮かび上がる吹き出し風のツールチップを作る

CSSのみでふわっと浮かび上がる吹き出し風のツールチップを作る

CSS3を使用してふわっと出現するアニメーションの吹き出し風のツールチップをcssのみで作る方法です。

完成は下のデモのような動きになります。

See the Pen CSSのみでふわっと浮かび上がる吹き出し風のツールチップ by Saomocari (@Saomocari) on CodePen.

アニメーションは下記の記事を参考にさせて頂きました。

吹き出しの部分は下記の記事を参考にさせて頂きました。

HTMLの部分

HTMLはコリスさんの記事同様にulタグでマークアップします。ツールチップに表示させたい部分はliタグの中にdivを入れてその中に記入します。

<ul id="tooltip">
    <li>
        <a href="#">tooltipsample1</a>
      <div>ツールチップの部分</div>
    </li>
    <li>
        <a href="#">tooltipsample2</a>
      <div>ツールチップの部分</div>
    </li>
    <li>
        <a href="#">tooltipsample3</a>
      <div>ツールチップの部分</div>
    </li>
</ul>​

CSSの部分

まずliに入れたdivタグを角丸やシャドウをつけるなどして装飾します。

#tooltip li > div {
    width: 150px;
    min-height: 20px;
    position: absolute;
    top:-50px;
    margin-left: -25px;
    padding: 5px;
    background: #ffffff;
    font-size:1em;
	
	/* ツールチップ角丸の装飾の指定 */
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari and Chrome */
    border-radius: 5px; /* Browsers that Support it like Opera */

	/* ツールチップボックスシャドウの装飾の指定 */
    -moz-box-shadow: 0 0 8px gray; /* Firefox */
    -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
    box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */
    }

visibility:hidden と opacity: 0 の2つを指定を上の” #tooltip li > div {} “のスタイルにつけたして見えなくします。visibility:hidden の指定がないと表示がもたつく感じがしました。opacity: 0 を指定しないとふわっとしないので、2つとも指定が必要です。

    visibility:hidden;
    opacity: 0;

吹き出しの三角の部分をツールチップの下に付け足します。:after擬似要素を使って▼を各ツールチップのすぐ後に表示させて、position で位置の指定と transform:rotate で▼を回転させています。(参照:CSS3でツールチップの吹き出しを表現する|skuare.net

#tooltip li > div:after {
    content:"\25B8"; 
    display:block;
    font-size:2em;
    height:0;
    line-height:0;
    position:absolute;
    color:#fff;
    bottom:-3px;
    left:1px;
    text-align:center;
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    width:100%;
    text-shadow: 3px 0 2px #ccc;
}

次にマウスオーバー時に、visibility:visible と opacity: 1 を指定してツールチップを見えるようにし、transition プロパティでふわっとしたアニメーションをつけます。

#tooltip li:hover > div {
/* マウスオーバー時にどうなっているかを指定 */
    visibility:visible;
    opacity: 1;
    top:-50px;
/* 上に書いた状態までになるまでの時間やアニメーションなど指定 */
    -moz-transition: all 0.5s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
    -o-transition: all 0.5s ease-in-out;  /* Opera */
    transition: all 0.5s ease-in-out; /* Browsers that Support it */
}​

上記の transition プロパティのアニメーションと同じものを最初の” #tooltip li > div {} “のスタイルにも付け足します。” #tooltip li > div {} “にもアニメーションを付けないと、マウスアウト時に何もアニメーションが付かないのでそっけなくなってしまいます。

以上でデモのような表現のツールチップが完成します。トータルのHTMLとCSSのコードは、最初のデモのHTMLとCSSのタブの所で見る事ができます。

頑なに画像を使わない意味も特にないですが、吹き出しの三角の部分の表現の仕方は斬新なアイディアで、こんな風にも使えるんだなぁと思いました。

Related Article

2 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能