Bu yazıda sadece javascript kullanarak tooltip yapımı anlatacağım. Internette sıklıkla jquery tooltip kullanımı görmüşsünüzdür. Jquery kullanmadan HTML data-* özelliği kullanarak tooltip oluşturacağız.
Nasıl Çalışır: Tooltipin nesnesinin gösterileceği etikete data-tooltip attribute ile ekranda gösterilecek değer girilir. Yazdığımız javascript kodu ile sayfada data-tooltip niteliği(attribute) olan bütün etiketler tooltip olarak ekranda görünecektir. Bu kısımda CSS tanımlaması tooltip nesnesinin daha güzel görünmesi için faydalı olacaktır.
|
1 2 3 |
<p id="ornek" data-tooltip="Merhaba bu tooltip uyarısıdır">Fareyi Getir</p> |
JavaScript kodu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<script> (function () { // © 2016 https://www.yazilimbilisim.net // tooltip için div oluşturma var toolTip = document.createElement("div"); // stil düzenlemesi toolTip.style.visibility="hidden"; toolTip.style.position="fixed"; toolTip.style.top="1ex"; toolTip.style.left="1ex"; toolTip.style.borderRadius="5px"; toolTip.style.backgroundColor="#8d8daa"; // oluşturupan nesneyi DOM içine ekleme document.body.appendChild(toolTip); function tooltipGoster (olay) { // üzerine geldiğimiz nesnenin konumunu tespit etme var kutu = olay.target.getBoundingClientRect(); var coordX = kutu.left; var coordY = kutu.top; // kordinatlarını düzenleme toolTip.style.left= (coordX + 40).toString() + "px"; toolTip.style.top= (coordY + 40).toString() + "px"; // ekranda gösterilecek nesne ve css ataması toolTip.innerHTML = "<span style='font-size:16px;color:red;padding:5px;'>" + this.dataset.tooltip + "</span>"; // tooltip nesnesini ekranda gösterme toolTip.style.visibility="visible"; } function tooltipGizle(olay) { toolTip.style.visibility="hidden"; } //bütün tooltip nesnelerini yakalayıp hepsine olay atama işlemi yapılıyor var uyarilar=document.querySelectorAll('[data-tooltip]'); for (var i = 0; i < uyarilar.length; i++) { uyarilar[i].addEventListener("mouseover", tooltipGoster , false); uyarilar[i].addEventListener("mouseout", tooltipGizle , false); } })(); </script> |
[divider]
Çalışmanın kodlarını toparlayıp bir örnek üzerinde açıklayacak olursak şu şekilde oluşacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!doctype> <html> <head> <meta charset="utf-8"> <title>Dijital Saat</title> <style> #ornek{ position: absolute; left:100px; top:100px; background: red; color:white; } #ornek2{ position: absolute; left:400px; top:400px; background: red; color:white; } </style> </head> <body> <p>Not:tooltip kullanmak için tooltip yapılacak nesneye <b>data-tooltip="gösterilecek açıklama" </b>şeklinde tanımlama yapılabilirsiniz</p> <div><p id="ornek" data-tooltip="Merhaba bu tooltip uyarısıdır">Fareyi Getir</p></p> <div><p id="ornek2" data-tooltip="Bu da ikinci tooltip">Fareyi Getir</p></p> <!-- script kodlarını </body> etitekinden hemen önce yazmayı unutmayın --> <script> (function () { // © 2016 https://www.yazilimbilisim.net // tooltip için div oluşturma var toolTip = document.createElement("div"); // stil düzenlemesi toolTip.style.visibility="hidden"; toolTip.style.position="fixed"; toolTip.style.top="1ex"; toolTip.style.left="1ex"; toolTip.style.borderRadius="5px"; toolTip.style.backgroundColor="#8d8daa"; // oluşturupan nesneyi DOM içine ekleme document.body.appendChild(toolTip); function tooltipGoster (olay) { // üzerine geldiğimiz nesnenin konumunu tespit etme var kutu = olay.target.getBoundingClientRect(); var coordX = kutu.left; var coordY = kutu.top; // kordinatlarını düzenleme toolTip.style.left= (coordX + 40).toString() + "px"; toolTip.style.top= (coordY + 40).toString() + "px"; // ekranda gösterilecek nesne ve css ataması toolTip.innerHTML = "<span style='font-size:16px;color:red;padding:5px;'>" + this.dataset.tooltip + "</span>"; // tooltip nesnesini ekranda gösterme toolTip.style.visibility="visible"; } function tooltipGizle(olay) { toolTip.style.visibility="hidden"; } //bütün tooltip nesnelerini yakalayıp hepsine olay atama işlemi yapılıyor var uyarilar=document.querySelectorAll('[data-tooltip]'); for (var i = 0; i < uyarilar.length; i++) { uyarilar[i].addEventListener("mouseover", tooltipGoster , false); uyarilar[i].addEventListener("mouseout", tooltipGizle , false); } })(); </script> </body> </html> |
