Bootstrap tooltip kullanarak çok kısa sürede sade ve şık araç ipuçları oluşturabiliriz. Tooltip, bir öğenin üzerine mouse ile gelindiğinde istediğimiz bilgilerin açılır bir kutu ile gösterilmesi diyebiliriz. Css kodları yazarak da istediğimiz araç ipuçlarını oluşturabiliriz ama zamandan kazanmak adına kesinlikle Bootstrap kullanmanızı tavsiye ederim.
Css ile nasıl tooltip yapılır öğrenmek istiyorsanız Css ile Tooltip Yapımı yazımı okuyabilirsiniz.
⇒ Bootstrap tooltip oluşturmak için yapmamız gerekenler:
- Bir <a> etiketi oluşturup attribute kısmına data-toggle = “tooltip” yazıyoruz.
- <a> etiketinin title attribute’una göstermek istediğimiz metni yazıyoruz.
- Son olarak aşağıdaki jquery kodlarını sayfamıza ekliyoruz.
|
1 2 3 4 5 |
$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); |
Önemli Bu kodların Jquery’i projemize dahil ettiğimiz script linkinden sonra yazıldığından emin olun. Aksi halde bu kodlarınız çalışmayacaktır.
Şimdi en basit haliyle bir bootstrap tooltip oluşturalım.
Html kodları
|
1 2 3 |
<a href="#" data-toggle="tooltip" title="Tooltip mesajı buraya yazılacak!">Fareyi üzerime getir!</a> |
Görünümü
⇒ Varsayılan olarak tooltip metni nesnenin üzerinde görüntüleniyor. İstersek bunu nesnenin sağında, solunda veya aşağısında da gösterebiliriz.
Bunun için <a> etiketinin data-placement attribute’una şu değerleri verebiliyoruz.
- top
- right
- bottom
- left
Bunları da örnek üzerinde görelim.
Html kodları
|
1 2 3 4 5 6 |
<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip mesajı buraya yazılacak!">Fareyi üzerime getir!</a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip mesajı buraya yazılacak!">Fareyi üzerime getir!</a> <a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip mesajı buraya yazılacak!">Fareyi üzerime getir!</a> <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip mesajı buraya yazılacak!">Fareyi üzerime getir!</a> |
Görünümü
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.
){kind=link}