Yakışıklı CSS Tolltipler Yapalım !

Merhaba Arkadaşlar bugünki yazımda sizlere yakışıklı göze hoş görünen CSS tooltipleri nasıl yapacağımızı anlatacağım.Css tooltip denilince yazının üzerine gelindiği zaman kendiliğinden açılan küçük bilgilendirme kutucuğu veya içeriğe göre değişen kutucuklar diye anlandırabiliriz.

Bu Tooltipleri yapmak ise sadece CSS ye danaynıyor.Bu Tooltipler Blogger Blogcu Wordpress ve diğer sitelerdede çalışan CSS güzellikleridir eğer isterseniz bir demo sayfası göstereyim sizlere bu sayfa blogcudan

Demo

Şimdi kodlarımızI nasıl yapacağımıza geçelim



Öncelikle blogcular  için </style> kodunu blogger için ]]</b:skin> kodumuzu bulalım ve hemen üstlerine ben tümden veriyorum aşağıdaki CSS kodlarımızı yapıştırıyoruz

.tooltip {
  border-bottom: 1px dotted #000000;
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}
    .tooltip:hover span {
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;
  margin-left: 0;
  width: 250px;
}
.tooltip:hover img {
  border: 0;
  margin: -10px 0 0 -55px;
  float: left;
  position: absolute;
}
.tooltip:hover em {
  font-family: Candara, Tahoma, Geneva, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  display: block;
  padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
    
 .classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }


 border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

CSS kodlarımızı ekliyoruz şimdi örnek olarak gösterdiğim sitenin kodlarını aşağıdaki vereyim

<p>Here are some examples of a <a class="tooltip" href="#">Classic<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Critical<span class="custom critical"><img src="http://i45.tinypic.com/xfyyr7.png" alt="Error" height="48" width="48" />

görüyorsunuz kodları kullanırken bu şekilde kullanacağız

İşte hepsi bu kadar böylece Blogcu Arkadaşlara bir eklentiyi daha sunduk devamı gelecek inş hadi selametle