UX Rocket Tooltip

Tooltip, farklı içerik gösterim metodlarına sahiptir. Sayfa içerisindeki bir ögeyi, bir metni, bir ajax sorgu sonucunu ya da bir JavaScript fonksiyonunun sonucunu içerik olarak gösterebilmektedir. Bununla beraber, temalanabilme yeteneği sayesinde, sayfa içinde farklı görünümlerde kullanılabilir.

<span class="tooltip" data-content="Tootip içeriği">metin</span>
<span class="tooltip" data-content="#tooltip-sample" data-type="popover">metin</span>
<span class="tooltip" data-content="/data/tooltip">metin</span>
<span class="tooltip" data-content="countTips()">metin</span>

Notlar

Gösterilecek içerik data-content attribute ile, sadece metin gösterimi durumunda title ile de tanımlanabilir

• düz metin girişi yapıldığında, metin gösterilir.
• #id, .class şeklinde sayfa içinde bir ögenin id ya da classı yazılırsa, bu ögenin içeriği gösterilir.
• http://, https://, / şeklinde url ile, ajax sorgusu yapılır ve dönen sonuç içerik olarak gösterilir
• myfunc() şeklinde window da tanımlı bir fonksiyon çalıştırılabilir.

Tanımlar

Property | Default | Açıklama -------------------- | ---------------- | -------- placement | top | Tooltipin elemanın ne tarafında gözükeceğini belirler. position | center | Tooltipin elemana göre pozisyonunu belirler. "center" tanımı, tooltip elemana ortalar. "start" tanımı, elemanın baş tarafına, "end" tanımı da son tarafına hizalar. template | <div {id} class="tooltip-pop {class}"><div class="tooltip-content">{content}</div><div class="tooltip-arrow"></div></div> | Açılan tooltipin html template formatını belirler. {id} placeholderı, id değerini, {class} placeholderı atanacak class değerini, {content} placeholderı da, içeriğin gözükeceği yeri belirler. Bu placeholder tanımları korunması şartı ile, tooltipin html formatı istenildiği gibi değiştirilebilir. cssClass | null | Tooltip html template içerisine eklenecek CSS classını belirtir. Farklı tema kullanılmak için CSSde ilgili class tanımlaması yapılabilir. id | null | Tooltip html template içerisine eklenecek CSS idsini belirtir. Farklı tema kullanılmak için CSSde ilgili id tanımlaması yapılabilir. showAnimate | false | Tooltip animasyon ile görünür hale gelir. type | tooltip | "tooltip" ya da "popover" değerleri tanımlanabilir. "tooltip" değerinde, fare elemanın üzerinden çekildiğinde tooltip kaybolur. "popover" değerinde ise, fare ile tooltip içerisinde gezilebilir, tooltip dışında bir yere tıklanınca tooltip kaybolur.

Data Attribute |   -------------------------- | ----- content | Gösterilecek tooltip içeriğini tanımlar. data-content değeri boş ise, title değeri kontrol edilir, ve bu değerdeki içerik tooltip içeriği olarak kullanılır. type | Tooltip görünüm formatını ("tooltip", "popover") belirler placement | Tooltipin elemanın ne tarafında gözükeceğini belirler. position | Tooltipin elemana göre pozisyonunu belirler. "center" tanımı, tooltip elemana ortalar. "start" tanımı, elemanın baş tarafına, "end" tanımı da son tarafına hizalar.

Callback |   -------------------- | ----- onReady | Tooltip, ilgili elemana bağlandığında çalışacak fonksiyonu çağırır. onOpen | Tooltip açıldığında çalışacak fonksiyonu çağırır. onClose | Tooltip "popover" modundayken "x" ikonuna basıp kapatıldığında çalışacak fonksiyonu çağırır. onRemove | Tooltip kapandıktan sonra çalışacak fonksiyonu çağırır. onUpdate | Tooltipe ait instance güncellendikten sonra çalışacak fonksiyonu çağırır. onDestroy | Tooltipe ait instance sayfadan kaldırıldıktan sonra çalışacak fonksiyonu çağırır.

Public Metodlar

Metod | Açıklama ---------------------------- | ------------------------------------------------------- $(selector).tooltip(options) | Bu method plugini manuel olarak bir elemana bağlamanızı sağlar. $.uxtooltip | Bu method pluginin detayını görmenizi sağlar. $.uxtooltip.update(el) | İçeriği değiştirilen tooltipi güncellemeyi sağlar. el gönderilmezse sayfadaki bütün tooltipleri günceller. $.uxtooltip.remove(el) | Seçilen elemanda tooltip instance bilgisini ve tooltip aksiyonlarını kaldırır. el gönderilmezse sayfadaki bütün tooltipleri kaldırır. $.uxtooltip.version | Sayfaya eklenmiş pluginin versiyon numarasını gösterir. $.uxtooltip.settings | Aktif pluginin ayarlarını gösterir.