5.00 / 1 oy

Bootstrap'te Disabled Button'da Tooltip Göstermek

Bootstrap'te buton gibi html elemanlarının üzerine gelindiğinde ufak bir pencere açılarak html'de title olarak gösterdiğimiz yazıları bir arka plan ve tasarım katarak gösterme uygulamasına tooltip adı veriliyor. Ancak aktif olmayan (disabled ve tıklanamayan) butonlarda tooltip özelliğini aktif hale getirdiğinizde disabled button için tooltip özelliği de çalışmıyor.

Kullanıcının giriş yapmadan sepete ürün ekleyemediği bir e-ticaret sitesi düşünelim.

- Ziyaretçiye sepete ekle butonunu göstermeliyiz

- Butona tıklayamaması için butonu disabled olarak kodlamalıyız

- Mouse ile üzerine geldiğinde ya da tıkladığında "sepete ürün ekleyebilmek için giriş yapın" mesajı vermeliyiz ki kayıt olması ya da giriş yapması gerektiğini anlasın

Ufak bir trick ile bu problemi şu şekilde çözdüm, madem buton'a disabled özelliği ekleyince tooltip çalışmıyor; ben de butonu bir div içine alır tooltip'i bu div'e eklerim.

bootstrap disabled button tooltip

Html Kodları:

<div title="Ürünü sepete ekleyebilmek için giriş yapmanız gerekiyor" data-toggle="tooltip"  data-placement="top">
    <button type="button" class="btn btn-success disabled"  >Sepete Ekle</button>
</div>

Javascript Kodları:

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

Kullanıcı giriş yapmadıysa bu şekilde html'i render etme kısmını da (kullandığınız backend yazılımına göre php, asp.net vb) kısmında size bırakıyorum.

koroglu

14.05.2020 00:51

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
Bootstrap'te Disabled Button'da Tooltip Göstermek

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.