CSS Tooltip Örneği

18-11-2012, 16:17:32

Üyeliği durduruldu

Merhabalar.

Lazım olabiliyor bazen basitçe yapımı aşağıdadır.Kendim hazırladım..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #03F;
}
#content:hover li {
	visibility: visible;
}
#yazi li {
	border: 1px dashed #666;
	background-color: #CCC;
	width: 450px;
	height: 150px;
	margin-left: -5px;

}
#yazi {
	visibility: hidden;
}
#yazi ul {
	list-style-type: none;
}
</style>
</head>

<body>
<div id="content">
<div id="wrapper">Mustafa Kemal Atatürk Kimdir ?</div>
<div id="yazi">
<ul>
<li>.<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/MustafaKemalAtaturk.jpg/230px-MustafaKemalAtaturk.jpg" width="150" height="150" /></li>
</ul>
</div>
</div>
</body>
</html>

20-11-2012, 21:44:31

#2

odizibudizi
hocam tooltip'i css ile yapmak biraz kod fazlalığı oluyor, jQuery kullanmak daha mantıklı ama bunu kullanıcam derseniz altına üçgen eklemenizi öneririm.
```
.ucgen {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #000;
}
```