CSS Tooltip (Araç Çubuğu) Kullanımı

CSS‘in özelliklerinden biri Tooltip‘in anlatımıyla karşınızdayım.

Tooltip, bir nevi üzerine gelince açılan bir div gibi çalışmakta ve linkler gibi birimlerin üzerine farenin gelmesiyle açıklama biriminin görünmesi özelliğidir.

Tooltip nasıl yapılır?

Tooltip yapımı çok basittir. İlk önce tooltip kullanımı için örnek bir HTML kod parçacığı verelim.

HTML

<a data-title="Linkin üzerine gelince gelecek olan açıklama satırı." class="tooltip">Linkin üzerine gel</a>

Gördüğünüz gibi data-title özelliğine vereceğimiz değer, tooltipimizde yazacak olan değerdir.

Şimdi tooltipimizin stil kodlarını verelim.

CSS

.tooltip{
	display: inline;
	position: relative;
}
.tooltip:hover:after{
	background: #333;
	background: rgba(255,0,0,.8);
	border-radius: 5px;
	bottom: -52px;
	color: #fff;
	content: attr(data-title);
	left: 20%;
	padding: 5px 15px;
	position: absolute;
	z-index: 98;
	width: 420px;
}

Demoyu Gör