Kuika’nın Tooltip elementi, kullanıcı arayüzünde bir öğeye dair ek bilgi sunmak için kullanılan hafif ve 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.
Tooltip elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Buton veya ikon açıklamaları: Kullanıcı butonun işlevini anlamadığında üzerine geldiğinde kısa bilgi göstermek için kullanılır. Örn: “Sil” ikonunun ne işe yaradığını açıklamak.
Form alanı yönergeleri: Form girişlerinde kullanıcıya ek bilgi sağlamak için kullanılır. Örn: “Şifre en az 8 karakter olmalıdır” açıklaması.
Kısaltılmış veya taşan metinlerin açıklaması: Listelerde veya tablolarda sığmayan metinlerin tamamını Tooltip ile gösterebilirsiniz. Örn: Uzun açıklamaların hover ile görünmesi.
İleri düzey veya teknik bilgi açıklaması: Kullanıcıyı boğmadan, ihtiyaç duyulduğunda bilgi sunmak için uygundur. Örn: Bir parametrenin teknik detaylarını göstermek.
Durum veya uyarı bilgisi verme: Hatalı, eksik veya özel duruma sahip bir öğe hakkında ek bilgi sağlamak için kullanılır. Örn: “Bu işlem yöneticiler tarafından sınırlandırılmıştır.”
2. Temel Özellikler
Bir UI elementine bağlanarak çalışır: Tooltip kendi başına görüntülenmez; Text, Icon, Button, Image gibi başka bir elementin üzerine eklenerek çalışır.
Kısa ve açıklayıcı metin sunma: Tooltip içerisinde kullanıcıyı yönlendiren, bilgi veren veya açıklama yapan kısa metinler bulunur.
Esnek konumlandırma: Tooltip metni, üst, alt, sağ veya sol gibi farklı konumlarda gösterilebilir. Böylece tasarıma uygun bir yerleşim sağlanır.
Web uygulamalarına özel kullanım: Tooltip elementi yalnızca web uygulamalarında desteklendiği için mobil uygulamalarda görünmez veya çalışmaz.
2.1. Tooltip Elementi Özellikleri
Tooltip elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.
Title: Tooltip içinde görüntülenen başlıktır. Kullanıcıya bilgi sağlamak amacıyla statik metinler veya Symbol Picker aracılığıyla dinamik değerler içerebilir.
Placement: Tooltip'in ekranda hangi yönde açılacağını belirler. Kullanıcı deneyimini iyileştirmek için aşağıdaki yönlerden birini seçebilirsiniz:
Top: Tooltip, öğenin üstünde görüntülenir.
Bottom: Tooltip, öğenin altında görüntülenir.
Left: Tooltip, öğenin solunda görüntülenir.
Right: Tooltip, öğenin sağında görüntülenir.
Color: Tooltip'in arka plan rengini belirler. Bu ayar, tasarım uyumunu artırarak bilgilendirici mesajların görünürlüğünü artırır.
2.2. Elemente Eklenebilen Aksiyonlar
Tooltip elementi, yalnızca bilgi gösterimi için tasarlanmış pasif bir element olduğu için herhangi bir aksiyonu desteklemez. Bu nedenle Tooltip elementini seçtiğinizde ADD ACTION butonu görünmez ve elemente bir tetikleyici eklenemez.
Tooltip’in aksiyon yapısına dair önemli noktalar:
Tooltip, kullanıcı etkileşimiyle (hover / tıklama) yalnızca bilgi gösterir, aksiyon çalıştırmaz.
Tooltip içerisine eklenen metin veya bilgiler, herhangi bir işlem başlatmak için kullanılamaz.
Tooltip bir UI control olmadığı için onClick, onChange gibi tetikleyiciler bulunmaz.
Eğer Tooltip’in bağlı olduğu elemente aksiyon eklemek isterseniz, bunu Tooltip’in kendisine değil, Tooltip’in iliştirildiği Button, Icon, Image, Label gibi elemente eklemeniz gerekir.
3. Tooltip Elementi Nasıl Kullanılır?
Bu bölümde Menu elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Görsel Üzerinden Ek Bilgi Gösterimi
Bir uygulamada, kullanıcı arayüzünü sade tutarken ek bilgilere ihtiyaç duyulan durumlarda Tooltip elementi kullanılır. Kullanıcı bir image elementi üzerine geldiğinde, görselin neyi temsil ettiğini açıklayan kısa bir metin tooltip içerisinde görüntülenir.
Senaryoda:
Tooltip, bir Image elementi ile ilişkilendirilir.
Kullanıcı görselin üzerine geldiğinde tooltip otomatik olarak açılır.
Tooltip içerisinde kısa ve açıklayıcı bir metin gösterilir.
Kullanıcı görselden ayrıldığında tooltip kapanır.
Adım 1 – Sayfaya Element Ekleme
UI Design modülünü açın.
Sayfaya Elements > Display > Tooltip elementini sürükleyip bırakın.
Tooltip gösterilecek yazıyı Tooltip > Properties > Title > “Sanatçının duvar resmi çalışmasından bir an.” olarak güncelleyin.
Diğer elementlerde olduğu gibi dinamik şekilde aksiyon sonucunu da Title alanına bağlayabilirsiniz.
Gösterim yerini Tooltip > Properties > Placement > Bottom olarak ayarlayın.
Tooltip içerisinde yazının stilini Tooltip > Styling > Text > Heading 4 ve Heading 6 olarak seçin.
Tooltip içerisine Elements > Display > Image elementini sürükleyip bırakın.
Görüntüyü daha önce yüklediğiniz veya yüklemek istediğiniz bir görsel üzerinden ayarlayabilirsiniz Image > Properties > Value > Uploaded Images.
Görüntünün alanı doldurması için Image > Properties > ImageFit > Fill olarak ayarlayın.
Image boyutunu Image > Styling > Layout > Width ve Height alanlarını % ve px tiplerinde aşağıdaki gibi ayarlayın.
Preview
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.
4. Ortak Özellikler (Properties)
Tooltip elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
