Bootstrap Tooltip Kullanımı

nhtctn nhtctn

Bir nesne üzerine geldiğimizde açıklayıcı bir mesaj kutusunu tooltip ile çıkarabiliriz.
** tooltip eklenecek nesneye data-toggle=”tooltip” eklemeliyiz.
** mesaj olarak gösterilecek içerik title özelliğine eklenmelidir.
** tooltip’i aktif etmek için mutlaka jquery kodu yazmalıyız. Jquery kütüphanesinin altında olmalıdır.
** data-placement özelliğine top, left, right ve bottom özelliğini verirek tooltip konumunu belirtiyoruz.
** data-html=”true” özelliği ile title içeriğine bir html içeriği ekleyebiliyoruz.

<a href="" class="btn btn-primary" data-toggle="tooltip" title="tooltip text">
        Hover ove me
</a>
<script>
 $(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
</script>

Bir html içeriği gösterilmek istenirse aşağıdaki bulunan şekilde yapılır.

<button id="btnTooltip" type="button" class="btn btn-success" data-toggle="tooltip" title="<h3>Header</h3><br><p>Tooltip text</p>" data-html="true">
        Tooltip with html
</button>

Yukarıda bulunan jquery kodu ile kullanılır.

Aşağıdaki örneğinizde ise sağ,sol,yukarı ve aşağı için örnek yapıldı.

    <a href="" class="btn btn-primary" data-toggle="tooltip" title="tooltip text" data-placement="top">
            top
        </a>

        <a href="" class="btn btn-primary" data-toggle="tooltip" title="tooltip text" data-placement="right">
            right
        </a>

        <a href="" class="btn btn-primary" data-toggle="tooltip" title="tooltip text" data-placement="bottom">
            bottom
        </a>

        <a href="" class="btn btn-primary" data-toggle="tooltip" title="tooltip text" data-placement="left">
            left
        </a>
    </p>

Bu örneğimizde ise buttona tıklayarak göster-gizle işlemleri yapıldı.

<p>
        <button type="button" class="btn btn-warning" onclick="showTooltip()">
            show Tooltip
        </button>

        <button type="button" class="btn btn-warning" onclick="hideTooltip()">
            Hide Tooltip
        </button>

        <button type="button" class="btn btn-warning" onclick="toggleTooltip()">
            Toggle Tooltip
        </button>
    </p>
  function showTooltip() {
        $('#btnTooltip').tooltip('show');
        }

        function hideTooltip() {
        $('#btnTooltip').tooltip('hide');
        }

        function toggleTooltip() {
        $('#btnTooltip').tooltip('toggle');
        }

Aşağıdaki bulunan jquery kodu ile hide-hidden-show-shown özellikleri görüldü.

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

Yorum yazın

BENZER YAZILAR