Bootstrap 4 İpuçları (Tooltıps popovers)

Bootstrap 4 İpuçları - Tooltip

Bootstrap4'te ipuçları üzerine gelince veya tıklayınca ortaya çıkan kısa açıklama yazılarıdır.
Nesnenin üzerine gelindiğinde ortaya çıkan ipuçlarına tooltips denir.
İpucu olaylarının kulllanılması için öncelikle uygun Javascript kütüphanelerinin sayfamıza eklenmiş olması gerekir. Bu kütüphaneler sırasıyla jquery.js, popper.js, bootstrap.js dosyalarıdır.

Ayrıca bu dosyalar sayfaya eklendikten sonra tooltip özelliğinin aktif olması için aşağıdaki kodu sayfamızda javascript kütüphanelerini ekledikten sonra mutlaka eklememiz gerekir gerekir.
Önemli Not: Eğer javascript dosyalarını eklemeden önce kodu yazarsanız çalışmaz, bunun sebebi yazdığımız kodun js dosyaları içindeki kodları kullanmasıdır.
Eklenecek javascript kodu : <script type="text/javascript"> $(function () { $('[data-toggle="tooltip"]').tooltip(); }); </script> Script kodunu yazdıktan sonra geriye sadece kullanacağınız nesneye 3 adet parametre ve bu parametreye ait özellikleri vermek kalıyor.
Bunlar;
İpucunun türünü belirtmek için => data-toggle="tooltip",
İpucunun konumunu belirtmek için => data-placement="top", (top, bottom, left, right değerleri alabilir)
İpucunun içeriğini belirtmek için => title="Tooltip üstte",
özellikleridir.
Örnek: <button type="button" class="btn btn-dark" data-toggle="tooltip" data-placement="top" title="Tooltip üstte"> Tooltip üstte </button>

Bootstrap4 Popover İpuçları

Bootstrap4'te üzerine tıklayarak da ipuçlarını açabiliriz. Bu tip ipuçlarına popover ipuçları denir.
Tooltip gibi popover için de Javascript kütüphanelerini sayfaya eklemek gerekmektedir.
Ayrıca bu sayfalar eklendikten sonra aşağıdaki script kodunu ekleyerek popover olayı aktif hale getirilmelidir.
Önemli Not: Eğer javascript dosyalarını eklemeden önce kodu yazarsanız çalışmaz, bunun sebebi yazdığımız kodun js dosyaları içindeki kodları kullanmasıdır.
Eklenecek javascript kodu : <script type="text/javascript"> $(function () { $('[data-toggle="popover"]').popover(); }); </script> Script kodunu yazdıktan sonra geriye sadece kullanacağınız nesneye 3 adet parametre ve bu parametreye ait özellikleri vermek kalıyor.
Bunlar;
İpucunun türünü belirtmek için => data-toggle="popover",
İpucunun konumunu belirtmek için => data-placement="top", (top, bottom, left, right değerleri alabilir)
İpucunun içeriğini belirtmek için => data-content="Popover üstte",
özellikleridir.
Örnek: <button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" data-content="Popover Üstte">Popover Üstte </button>

Tooltips ve Popover'ı Beraber Kullanmak

Sayfa içerisinde tooltip ve Popover ipucu uygulamalarını beraber kullanmak isteyebilirsiniz. Bunun için Javascript kütüphanelerini yükledikten sonra aşağıdaki script kodunu yazmanız yeterlidir.
<script type="text/javascript"> $(function () { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); }); </script>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın