Tooltip elementi, kullanıcı bir öğenin üzerine geldiğinde açıklayıcı bir mesaj göstererek arayüzü sade tutup ek bilgiyi yalnızca ihtiyaç duyulduğunda sunmak için kullanılır.
Tooltip elementi, kullanıcı arayüzünde bir öğeye dair ek bilgi sunmak için kullanılan etkileşimli bir bilgi balonudur. Kullanıcı, ilgili öğenin üzerine geldiğinde Tooltip belirir ve öğeyle ilgili açıklayıcı bir mesaj gösterir. Bu sayede arayüz sade tutulurken, ihtiyaç duyulan ek bilgiler kullanıcıya yalnızca gerektiğinde gösterilmiş olur.
Bu elementi kullanabilmek için öncelikle “Tooltip” elementinizi sayfanıza sürükleyin. “Title” alanından görünmesini istediğiniz mesajı yazın. Placement alanını “Bottom” olarak ayarlayın. Styling panelindeki Style alanından Heading 4 Text ve Heading 6 Text seçimini yapın. Tooltip içerisine “Image” elementinizi yerleştirin. İçerisine Value alanından görselinizi yükleyin ve ImageFit alanını Fill olarak ayarlayın. Styling paneli içerisinden Width alanını yüzde 100 olarak, Height alanını ise 250 px olarak ayarlayın.
Uygulama test edildiğinde, görsel üzerine gelindiğinde Tooltip elementi otomatik olarak görüntülenir ve görselin neyi temsil ettiğini açıklayan kısa bir metin sunar. Kullanıcı imleci görselden uzaklaştırdığında tooltip kapanır. Bu yapı sayesinde ekranda ek alan kullanmadan kullanıcıya hızlı ve anlaşılır bilgilendirme sağlanır.
