toolTip.js

toolTip.js

Web sitelerinizde kullanabileceğiniz  eski adı ile tutorialpot  sitesi  tarafından hazırlanmış bir  tooltip örneği. Tutorialpot  sitesi artık kapalı olduğu için böyle  şık bir çalışmanın  zaman içinde  kaybolmasına göz  yummak bence  pek  doğru olmaz. Geliştiricinin  tam olarak kim olduğunu bulamadım o yüzden yazar ismide yazamıyorum burada. Hem resimlere  hemde yazılara  bu eklenti ile kolaylıkla  bilgi balonu ekleyebiliyorsunuz.

Kullanım

  • Head  etiketleri arasına eklemeniz gereken bölümler.

Js ve Css dosya adresleri : 

  <link rel="stylesheet" href="css/jQuery.toolTip.css" media="screen" />
  <link rel="stylesheet" href="css/demo.css" media="screen" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/jQuery.toolTip.js"></script>

 JavaScript : 

  <script type="text/javascript">
	$(document).ready(function(){
		$('.tooltip').toolTip();
	});	
  </script>

 Html :

Tootlip kullanmak istediğiniz  elementin kodları  içine class=”tooltip”  kodu eklemeniz  gerekiyor.

Normal  kod

<a href="" title="Mintik">Mintik.com</a>

Tooltip eklenmiş olan kod

<a href="" class="tooltip" title="Mintik">Mintik.com</a>

Title  kısmında yazacağınız  yazılar  uyarı balonu içinde görünecektir.

Bu şekilde aklınıza gelebilecek her türlü  element  üzerinde  uygulayabilirsiniz.

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-05-20 tarihinde yayınlandı,Toplam 1208 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...