Bonnie styles. - Webデザイン、CSSなど

さて、期末考査3日前です。

えーっと。前やったGarnet Sky≫ CSSだけでツールチップ[吹き出しもCSS！].が複雑な感じがしたのでやり直してみました。

OKGoogleChrome/Safari/Firefox/Opera NGInternetExplorer

HTML Source

	<section id="sec1">
		<h2>:before(content:attr(title)を使って</h2>
		<p title="(≧∀≦#)">ここにマウスを乗せると・・・！！</p>
		<p title="(´･ω･｀)ゞｱﾘｶﾞﾄｺﾞｻﾞｲﾏｽ.｡.･ﾟ">ここマウスオーバーしてみなYO!!</p>
	</section>
	<section id="sec2">
		<h2>Display:block/noneを切り替えて</h2>
		<p>ここにマウスを乗せると・・・！！<span>(≧∀≦#)</span></p>
		<p>ここマウスオーバーしてみなYO!!<span>(´･ω･｀)ゞｱﾘｶﾞﾄｺﾞｻﾞｲﾏｽ.｡.･ﾟ</span></p>
	</section>

えっと、#SEC1の方はチップに表示したいものを title要素 に書き込んでいます。で :hover と :before(content:attr(title)) を使用して表示させています。
#SEC2のほうは、Spanを非表示にしてマウスオーバーじに表示するという感じです。

CSS Source

h2 {
	font-size: 1.1em;
	position: relative;
	border-left: 5px solid #eee;
	padding: 5px 10px 10px
	}
section p {
	position: relative;
	margin-left: 20px;
	}
#sec1 p:before {
	content:attr(title);
	display:none;
	}
#sec1 p:hover:before {
	display: block;
	width: auto;
	padding: 10px;
	border: 1px solid #ccc;
	background: #eee;
	top: 25px;
	left: 40px;
        position: absolute;
        z-index:  11;
	}

まずはBeforeを使ったほうから。(※IE非対応）

• #sec1 p:before {content:attr(title);display:none; }

でpの前に表示されるもの：Title要素を非表示と指定

• #sec1 p:hover:before { display: block; position: absolute; z-index: 11; left: 40px; top: 25px;}

pがhoverしたときに 前に表示されるものを表示させてz-indexで重ならないよう positionで位置設定をします

#sec2 p span {
	display: none;
	padding: 10px;
	border: 1px solid #ccc;
	background: #eee;
	z-index: 11;
	top: 25px;
	left: 40px;
	position: absolute;
}
#sec2 p:hover span {
	 display:block;
	 }
p:hover:after {
	content:'';
        position:absolute;
        left:50px;
	top:15px;
	display:block;
	border-right:solid 5px transparent;
	border-bottom:solid 10px #ccc;
	}

表示/非表示の切り替え版（※IE対応）

• #sec2 p span { display: none; z-index: 11;　top: 25px; left: 40px; position: absolute;}

で、p内のspanの位置設定などをして非表示にします

• #sec2 p:hover span { display:block; }

hover 時に表示させる

矢印のCSSです(※IE非対応）

• p:hover:after {content:”; position:absolute; left:50px; top:15px; display:block; border-right:solid 5px transparent; border-bottom:solid 10px #ccc;
  }

p:hoverしたときあとに、border-right:solid 5px transparent;（透明のボーダー） border-bottom:solid 10px #ccc; (#CCCのボーダー)を表示。

最後の方は面倒になってひどいことになっていますが、こんな感じでできます。
IE対応を視野に入れるなら、spanを使うやり方のほうがいいかと思います。一応チップの表示はできます。（問題は矢印。）
あと、attr(title)を使うとブラウザのTitle要素のチップがでてきてしまうのであまりおすすめじゃないですね。（ソースは結構キレイだと思うのですが。）