SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

CSSでツールチップ

擬似クラス :hover を使えば、Javascriptなしでもツールチップが作成可能。

IEを無視できないときは、a:hover で。
IEはほっといてよければ、なんにでも :hover で。

ある要素の中の要素を、通常は隠しておいて、:hover のとき見せるようにすると、ツールチップの出来上がり。
position: relative; で位置の指定に一工夫。

<style>
a.tt {position: relative;}
a.tt span {display:none;}
a.tt:hover span {
	display:block;
	width: 200px;
	padding:5px;
	position: absolute; 
	top: 1.5em;
	left: 2em;
	text-decoration: none;
	border: solid 2px #666699;
	background-color: #ffffcc;
	color: #000066;
}
a.tt:hover, a.tt:hover span {z-index:1;}
</style>

<a href="#" class="tt">softelメモ<span>ソフテルの技術系ブログです。</span></a>とは

使用例

softelメモソフテルの技術系ブログです。とは

softelメモphp、javascript、linux 等について書き綴っているソフテルのブログです。とは

softelメモ毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。毎日更新です。とは

 

z-indexを変えるようにしないと、ツールチップが下になってしまったので、追加。

関連するメモ

コメント