CSS3のtransitionを使ったツールチップ

Mar 18, 2014

Category :

Tags :

最近、ちょこちょこCSS3のtransition使ってます。なので、CSS3のtransitionを使った、ちょっとしたアニメーションで表示するツールチップのTipsです。

DEMO

HTML

	<p class="tooltip"><a href="https://twitter.com" target="_blank"><img src="http://www.n--log.net/wp/wp-content/themes/COOL_STONE/images/ico_03.png" alt="Twitter"><span>https://twitter.com/</span></a></p>

CSS

	.tooltip {
		position: relative;
	}
	.tooltip a span {
		position: absolute;
		top: -28px;
		left: -56px;
		background: #000;
		color: #fff;
		padding: 5px 12px;
		font-size:12px;
		visibility: hidden;
		opacity: 0;
	}
	.tooltip a:hover span {
		visibility: visible;
		opacity: 1;
		top:-35px;
		-webkit-transition: all 0.5s ease-in-out 0s;
		-moz-transition: all 0.5s ease-in-out 0s;
		-o-transition: all 0.5s ease-in-out 0s;
		transition: all 0.5s ease-in-out 0s;
	}

こんな感じ。
CSS3便利。でもベンプレがめんどい…