Bootstrap Popovers Kullanımı

nhtctn nhtctn

Tooltip ile yapabildiğimizi popover ile de yapabiliriz fark olarak tıklama ile de mesaj kutusunu aktif edebiliyoruz.

** popover eklenecek nesneye data-toggle=”popover” eklemeliyiz.

** title ile mesaj kutusunun başlık kısmını tanımlıyoruz.

** data-content ile mesaj kutusunun içerik kısmındaki yazıyı tanımlıyoruz. ** Popover aktif etmek için mutlaka jquery kodu yazmalıyız. Jquery kütüphanesinin altında olmalıdır.

<a href="#" data-toggle="popover" title="popover header" data-content="come content" class="btn btn-primary">
        Toggle popover
    </a>
 $(function() {
            $('[data-toggle="popover"]').popover();
  });

Aşağıda bulunan popover üzerine tıklandığı zaman açılır kapatılır.Sayfanın boş bir yerine tıklandığı zaman kapanmaz.

<a href="#" data-toggle="popover" title="popover header" data-content="come content" class="btn btn-primary" data-placement="top">
        popover on top
    </a>
    <a href="#" data-toggle="popover" title="popover header" data-content="come content" class="btn btn-primary" data-placement="right">
        popover on right
    </a>
    <a href="#" data-toggle="popover" title="popover header" data-content="come content" class="btn btn-primary" data-placement="bottom">
        popover on bottom
    </a>
    <a href="#" data-toggle="popover" title="popover header" data-content="come content" class="btn btn-primary" data-placement="left">
        popover on left
    </a>
    <br><br><br><br>
    <a href="#" data-toggle="popover" data-trigger="focus" title="popover header" data-content="come content" class="btn btn-primary">
        Toggle popover
    </a>
 function showPopover() {
            $('#btnPopover').popover('show');

        };

        function hidePopover() {
            $('#btnPopover').popover('hide');

        };

        function togglePopover() {
            $('#btnPopover').popover('toggle');

        };

Aşağıda bulunan örneğimizde ise üzerine tıklandığı zaman açılır ama sayfanın boş bir yerine tıklandığı zaman ise kapanır.

 <a href="#" data-toggle="popover" data-trigger="focus" title="popover header" data-content="come content" class="btn btn-primary">
        Toggle popover
    </a>

Aşağıdaki örneğimizde tooltip te olduğu gibi mouse ile üzerine geldiği zaman görünür üzerinden gidildiği zaman ise kaybolur.

<a id="btnPopover" href="#" data-toggle="popover" data-trigger="hover" title="popover header" data-content="come content" class="btn btn-primary">
        Toggle popover
    </a>

Not: Yukarıda yaptığımız örnekler jquery kodu ile birlikte kullanılır.

<a id="btnPopover" href="#" data-toggle="popover" data-trigger="hover" title="popover header" data-content="come content" class="btn btn-primary">
        Toggle popover
</a>

 <button type="button" class="btn btn-success" onclick="showPopover()">
        show
    </button>
    <button type="button" class="btn btn-success" onclick="hidePopover()">
        hide
    </button>
    <button type="button" class="btn btn-success" onclick="togglePopover()">
        toggle
    </button>
function showPopover() {
            $('#btnPopover').popover('show');

        };

        function hidePopover() {
            $('#btnPopover').popover('hide');

        };

        function togglePopover() {
            $('#btnPopover').popover('toggle');

        };

        $('#btnPopover').on('show.bs.popover', function() {
            console.log('show');
        });
        $('#btnPopover').on('shown.bs.popover', function() {
            console.log('shown');
        });
        $('#btnPopover').on('hide.bs.popover', function() {
            console.log('hide');
        });
        $('#btnPopover').on('hidden.bs.popover', function() {
            console.log('hidden');
        });

Yorum yazın

BENZER YAZILAR