1.3.0 • Published 10 years ago

uxrocket.tooltip v1.3.0

Weekly downloads
3
License
MIT
Repository
github
Last release
10 years ago

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

PropertyDefaultAçıklama
placementtopTooltipin elemanın ne tarafında gözükeceğini belirler.
positioncenterTooltipin 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.
cssClassnullTooltip html template içerisine eklenecek CSS classını belirtir. Farklı tema kullanılmak için CSSde ilgili class tanımlaması yapılabilir.
idnullTooltip html template içerisine eklenecek CSS idsini belirtir. Farklı tema kullanılmak için CSSde ilgili id tanımlaması yapılabilir.
showAnimatefalseTooltip animasyon ile görünür hale gelir.
typetooltip"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 
contentGö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.
typeTooltip görünüm formatını ("tooltip", "popover") belirler
placementTooltipin elemanın ne tarafında gözükeceğini belirler.
positionTooltipin 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 
onReadyTooltip, ilgili elemana bağlandığında çalışacak fonksiyonu çağırır.
onOpenTooltip açıldığında çalışacak fonksiyonu çağırır.
onCloseTooltip "popover" modundayken "x" ikonuna basıp kapatıldığında çalışacak fonksiyonu çağırır.
onRemoveTooltip kapandıktan sonra çalışacak fonksiyonu çağırır.
onUpdateTooltipe ait instance güncellendikten sonra çalışacak fonksiyonu çağırır.
onDestroyTooltipe ait instance sayfadan kaldırıldıktan sonra çalışacak fonksiyonu çağırır.

Public Metodlar

MetodAçıklama
$(selector).tooltip(options)Bu method plugini manuel olarak bir elemana bağlamanızı sağlar.
$.uxtooltipBu 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.versionSayfaya eklenmiş pluginin versiyon numarasını gösterir.
$.uxtooltip.settingsAktif pluginin ayarlarını gösterir.