
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="https://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.