Tippy.js tooltip incelemesi ve kullanımı

Beni Tippy.js kullanmaya iten MVC6 Grid de yaşadığım Bootstrap tooltiplerin stabil çalışmama sorunu idi. Bazen ikinci kez üzerine geldiğimde açılıyor veya bazı tarayıcılarda hiç açılmıyordu.

Açıkçası Bootstrap tooltip’lerde, gösterildiğinde DOM’a eklenir ve gizlendiğinde kaldırılıyor olmasına rağmen, yüzlerce tooltip’in gösterildiği listeleme sayfalarında performans sorunları da yaşadım. Bu yüzden Tippy.js tooltip framework ile tanıştım.

Kendisinin daha akıcı ve kolay özelleştirilebilir olması, sayfa performansını etkilemiyor olması ve %95 lik bir tarayıcı uyumu ile çalışması benim tercih sebebim oldu.

Ayrı zamanda kendini yeniden boyutlandırmak ve konumlandırmak için her zaman javascript’i dinler. Projenize Tippy.js dahil ettikten sonra basit kullanımı aşağıdaki gibidir.

<button class="btn tippy"title="I'm a tooltip!">Text</button>

<button class="btn tippy"
        title="I'm a tooltip!"
        data-animatefill="false"
        data-animation="scale"
        data-position="bottom">
    Text
</button>

Veya

<button class="btn tippy" title="I'm a tooltip!">Text</button>

<script>
new Tippy('.tippy', {
    position: 'right',
    animation: 'fade',
    popperOptions: {
        modifiers: {
            flip: {
                behavior: ['right', 'bottom']
            }
        }
    }
})
</script>

Tema ayarlamaları ve tüm özelleştirmeler için doküman sayfasını ziyaret edebilirsiniz.