# Tooltip

Tooltip, nesneler üzerine mouse imlecinin getirilmesi ile açıklayacı mesaj kutuları açılmasını sağlar.

![Resim 1 : Animation Tooltip](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/c5JyGaDB3mKm6lNSoBAI/Resim%201%20animation%20tooltip.jpg)

Tooltip hazırlanması üç farklı şekilde yapılabilinmektedir.

* **Animation Tooltip Type - Expression :** 

Animasyonunuzu hazırladıktan sonra tooltip özelliği eklemek istediğiniz mimiği animasyon sayfasının "ctrl " özelliğini aktif hala getirdikten sonra yine animasyon sayfası üzerinden seçilerek ![](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/kJg10hjkPGLh1203ky6R/edit.jpg) ikonu yardımı ile edit animation element sayfası açılmaktadır.  Resim 1 'de gösterilen örneğimizde mimiğimiz kırmızı ile gösterilmiştir. 

![Resim 2 : Animation Tooltip Type - Expression](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/r21fnzjo2XAOcGeH9t7R/Resim%202%20%20animation%20tooltip%20expression.jpg)

**Title** : Ekranda görüntülenecek bilgi mesaj kutusunun başlığını göstermektedir.

**Size** : Ekranda görüntülenecek bilgi mesaj kutusu içindeki mesajın fontunu ayarlamaktadır.

**Color** : Ekranda görüntülenecek bilgi mesaj kutusu içindeki mesajın yazı rengini göstermektedir.

**Delay** : Mesaj kutusunun bekleme süresini belirtmektedir.

Expression alanı ile kendi java script kodlarınızı kullanarak dilediğiniz koşul / şarta göre tooltip özelliğinin çalışmasını sağlayabilirsiniz. Örneğinizde sadece tooltip özelliği eklenen animasyonun üzerine geldiğinizde başlığı " Tooltip " olan , kırımızı ve 12 punto yazı büyüklüğü ile " Tooltip Test " yazılması sağlayan basit bir script yazılmıştır.

* **Animation Tooltip Type - Tag :** 

![Resim 3 : Animation Tooltip Type - Tag](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/KW2hXxuvmZxBJgpFrZeJ/Resim%203%20%20animation%20tooltip%20tag.jpg)

Tooltip özelliği eklenirken Tag seçeneği ile hazırlamak , bilgi mesajı içerisinde dilediğiniz bir değişken / tag ' ınızın değerinin atanması ve gösterilmesi sağlamaktadır. Resim 3 'te gösterilen örneğinizde tooltip ,  " G1\_*Reactive*\_Power " değişkenine bağlanmıştır. Değişken önüne " power " yazılması , arka ekine " kW " yazılması ayarlanmıştır. Bağlantı sırasında değişkenden veri gelmemesi durumunda "0 " gösterilmesi belirtilmiştir. Ekranda " Power0kW " olarak görüntülenecektir.

* **Animation Tooltip Type - Text :** 

![Resim 4 : Animation Tooltip Type - Text](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/wYwwSOQUj53hayhVpHeX/Resim%204%20%20animation%20tooltip%20text.jpg)

Tooltip özelliği eklenirken Text seçeneği ile hazırlamak , bilgi mesajı içerisinde dilediğiniz metnin görüntülenmesini sağlayacaktır. Resim 4'te gösterildiği gibi " text " alanına dilediğiniz metni yazmanız yeterli olacaktır.

## ToolTip Visualization, Preview

ToolTip tasarım işlemlerini tamamladığınızda " animation preview " ekranında veya ikonu yardımı ile açılan preview ekranında ,  " visualization " ekranında ilgili animasyonun mouse imleci ile üzerine geldiğiniz zaman ilgili alanda belirlediğiniz kural / şart' lara göre hazırladığınız bilgi mesajınız resim1 de gösterildiği gibi ekran üzerinden görüntülenebilinecektir.