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 を指定しないとふわっとしないので、２つとも指定が必要です。
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のタブの所で見る事ができます。
頑なに画像を使わない意味も特にないですが、吹き出しの三角の部分の表現の仕方は斬新なアイディアで、こんな風にも使えるんだなぁと思いました。
2 Comments & Tracbacks