Mootools ile ipucu açıklamaları (tooltip)

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.

İpucu Açıklaması?

mfyz.com'da oldukça fazla gördüğünüz açıklama kutucukları var. Bir nesnenin (resim, buton, yazı, bağlantı) üzerine geldiğinizde açıklama olarak görünen ve fare imlecini takip eden kutulardan bahsediyorum.

Önceki versiyonlarda bu açıklama kutuları hem daha farklı idi hem de kendi yazdığım bir ufak kütüphaneyi kullanıyordu. Ancak kütüphane her ne kadar tüm tarayıcılarda çalışma destekli (crossbrowser) olsa da problemler yaşıyordum kodlarken. Aynı şekilde sadece ipucu eklemek için bile html'i oldukça kirletiyordum.

v0.7 ile mootools çatısı (framework) üzerinde çalışmaya başladım. Bu süreçte mootools'daki birçok eklentiyi kullandım. Bunlardan birisi de ipucu eklentisi. Tips.js olarak geçiyor.

Mootools'un Tips.js dökümantasyonuna erişmek için :http://docs.mootools.net/Plugins/Tips.js

Bu dökümanda bu ipucu kutucularının yapımı, ayarlanması ve stille desteklenmesini anlatacağım.

Nasıl çalışıyor?

Eski kütüphaneyi (ipucu) hatırlayanlar bilir, bir nesneye ipucu eklemek için ona onMouseOver ve Out gibi olaylarına tanımladığımız fonksiyonlarla ve parametrelerle bu işi yapabiliriz. Fakat mootools'da css adresilerindeki elemanları seçebilme özelliği var. Aslında tips kütüphanesinin yaptığı iş, verilen adreslerdeki tüm elemanlara MouseOver ve MouseOut olayları eklemek. Bu olaylarına atanan fonksiyonlarla da bu kutucukları fare imlecine göre göstermek. Ama bunu oldukça pratik bir şekilde yapıyor.

İpucu eklemek istediğimiz nesneleri "ipucu" adında bir sınıfta toplayalım, Yani css sınıfı olarak "ipucu" sınıfı ekleyelim.

Örneğin :
<a href="http://www.mfyz.com" target="_blank">www.mfyz.com</a>
olan nesneyi
<a href="http://www.mfyz.com" target="_blank" class="ipucu"
   title="MFYZ.Com">www.mfyz.com</a>
şeklinde ipucu sınıfına dahil edip "title" argümanı olarak bir açıklama ekledik.
Hatta bu açıklama içerisinde html etiketleri bile kullanabiliriz. (Tırnak kurallarına uygun olduğu sürece sorun çıkarmaz)
<a href="http://www.mfyz.com" target="_blank" class="ipucu"
   title="<b>MFYZ.Com</b> <br>Yeni pencerede açılır">www.mfyz.com</a>
Bu işlemi sadece bağlantılarda değil tüm html nesnelerinde uygulayabiliriz. Resimler, butonlar, yazılar vs.

Şimdi mootools Tips kütüphanesiyle ipucu tanımlayalım. (Bu tanımları mootools'u include ettikten sonrak bir javascript dosyanızda veya html dosyanızdaki bir javascript bloğuna koyarak yapın.)
var Ipuclari = new Tips( $$('.ipucu') );
new Tips tanımı içerisinde ilk parametre (zorunlu) ipucu uygulanacak nesneleri belirliyor. Mootools'un nesne seçicilerini kullanarak CSS adresine göre yani .ipucu belirteci ile ipucu sınıfındaki tüm nesneleri gösteriyoruz.
var Ipuclari = new Tips($$('.ipucu'), {
  showDelay: 400,
  hideDelay: 400
});
ikinci parametre ile de bir ayar dizesi (nesne olarak) belirtiyoruz. Parametreler hakkında detaylı bilgiyi dökümantasyonundan edinebilirsiniz.

Ya da geçiş efekti uygulatarak gösterip-gizlemek isterseniz :
var Ipuclari = new Tips($$('.ipucu'), {
  initialize:function(){
    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
  },
  onShow: function(toolTip) {
    this.fx.start(1);
  },
  onHide: function(toolTip) {
    this.fx.start(0);
  }
});
Bu kod ile 500 milisaniyede transparanlıkla gösterebilir veya gizleyebilirsiniz.

Peki nasıl görünecek, görünümünü nasıl değiştireceğim?

Tabiki css ile yapacağız. Ayar parametrelerinden className parametresi ile ipucu için çizdirilen html nesnelerinin sınıf adlarının başlangıcını değiştirebilirsiniz. Eğer değer vermezseniz varsayılan olarak bu sınıfların adlarının başlangıcı "tool" olacaktır.

Bu sitede kullandığım stile göre örnek vermek istiyorum, ben className kullanmadım. Yani varsayılan olarak "tool" ile başlıyor.
.tool-tip {
  background-color: black;
  padding: 5px 8px;
  z-index: 10000;
}

.tool-text, .tool-text * {
  font-size: 11px;
  color: white;
}

.tool-title {
  display: none;
}
Bu stilde değiştirmeye çalışılan html kodu aslında şöyle, yani Tips eklentisi html'e şu kısmı sonradan dinamik olarak ekleyip ekranda gösteriyor.
<div style="position: absolute; top: 96px; left: 810px; visibility: hidden; opacity: 0;" class="tool-tip">
  <div>
    <div class="tool-title">
      <span>
        http://www.mfyz.com
      </span>
    </div>
    <div class="tool-text">
      <span>
        <b>MFYZ.Com</b> <br>
        Yeni pencerede açılır
      </span>
    </div>
  </div>
</div>
Ben link url'sini görüntülemek istemiyorum. tips eklentisi otomatik olarak ekliyor url'yi. Gizlemek için css'de display: none; yaptım.
En dıştaki tool-tip çerçevesinin stillerini kutu olarak düşünürsek ayarlıyorum. Yazı için de tool-text sınıflı nesneyi düzenliyoruz.

Eğer className'e fatih değerini verseydik css sınıf adları fatih-tip, fatih-text, fatih-title gibi olacaktı. Bu tanımı farklı sınıflara farklı className ile yaparak farklı stillerde ipuçlarını aynı sayfada gösterebilirsiniz.

Tam örnek içinhttp://demos.mootools.net/Tips adresindeki demoyu inceleyebilirsiniz.


Hazırlayan : Mehmet Fatih YILDIZ

Yorumlar

Üye Resmi Gürkan OLUÇ
5 Şubat Salı ´08 20:53
Güzel bir makale teşekkürler   :-)
Üye Resmi enver
6 Şubat Çarşamba ´08 10:58
ne zaman başlıcam ben ya böyle süslü şeyleri kullanmayı   :-(  böyle güzel güzel uygulamaları gördükçe o kadar çok özeniyorum ki anlatamam. pufff   :-(
Üye Resmi Soner Akın
19 Şubat Salı ´08 17:26
Makale ve paylaşım için teşekkürler.
Üye Resmi Salih Turan
26 Mart Çarşamba ´08 22:09
Hakikaten muhteşem bir açıklama olmuş   :-)
1 Nisan Salı ´08 14:56
bir türlü yapamadım abi şunu dosya olarak paylaşsan makbule geçerdi. şimdiden tşrklr.
Üye Resmi Salih TURAN
2 Nisan Çarşamba ´08 17:14
Merhabalar tekrardan. Başka bir siteden edindiğim tooltips versiyonunu kendi siteme kurdum.
çalışma mantığı ise <a onmouseover="show_tip(31);" onmouseout="hide_tip(31)"  title='Tank savaşları oyunu' href=oyna.php?oyun=31><img alt='Tank savaşları oyunu' src='http://de.fishki.net/picsw/052007/22/flash/Tank-2007.jpg' height='90' width='130'></a> <div id='Tip31' class='popcom'>Oyun yüklenince Play Game Tuşuna basıyoruz WASD tuşları ile tankımızı hareket ettirip fare ile tıklayarak ateş ediyoruz.</div>

şeklinde oluyor. Ancak sayfanın ortasında bu ufak title yukarda görünmeyen biyerde açılıp sayfa düzenini bozuyor.sizin aşağıda yaptığınız gibi yrm: cevap: bölmesindeki gibi divler ile yapabileceğim bir örnek verebilirmisiniz?
Üye Resmi talat
16 Ağustos Cumartesi ´08 02:56
sanırım jquery olan sayfalarda çalışmıyor.. haksızmıyım?
Üye Resmi Şenol Örencik
17 Ağustos Pazar ´08 01:56
Süper yaa,
Ben bunu javascript ile oluyo zannetmiştim.
Çok güzel bir paylaşım olmuş çok teşekkürler.
Çok işime yarıcak,süper,süper süper   :-D
17 Ağustos Pazar ´08 18:10
Evet aslında javascript ile oluyor fakat mootools gibi framework'leri kullanarak bu işleri daha pratikleştirebilirsin. Hatta görüldüğü gibi tek satırlık tanımlama ve basit bir kullanım yapısı ile ipucu zımbırtısı yapabiliyorsun.
Üye Resmi Muhammed Han Çetin
16 Eylül Salı ´08 10:41
Gerçekten buna çok ihtiyacım vardı.Teşekkür ederim.
9 Nisan Perşembe ´09 08:09
Teşekkürler. Çok değerli bir çalışma.  Yaklaşık 2 aydır peylerpey bu konuyla ilgili araştırma yapıyordum. Ancak ne var ki; bu kadar akıcı ve anlaşılır bir şekilde mootools kullanımıyla ilgili bir yazı olsun bulamadım. Bulduğum ingilizce dokumanları inceleyip kıt ingilizcemle olayı kavramaya çalışıyordum. Şimdi taşlar yerine oturdu.   :-)  Sıra bu frameworku kullanarak harikalar yaratmakta. Hoş, harika deyince sizin bu güzel çalışmanızın yanına bile yaklaşamaz belki ama kendimce yapacağım birtakım güzellikler de yok değil. Ama hatırlatırım; boynuz daima kulağı geçer.    :-D
Değerli vaktinizi ayırıp bu makaleyi bizimle paylaştığınız için tekrar teşekkürler.

Çalışmalarınızda başarılar dilerim.
Üye Resmi volkan
6 Eylül Pazartesi ´10 10:39
gerçekten güzel bir makale olmuş. mootools tooltip yapısı çok iyi anlatılmış.
Üye Resmi Gokhan TIKNAZOGLU
4 Haziran Cumartesi ´11 10:26
merhabalar hocam ellerine saglik... ben de mootools ile calisiyordum fakat bir sorun yasiyorum

sliding login kontrolu var mootools'un... asp.net sayfamda duzgun olarak calisiyor. Fakat ustten acilan sayfada kullanici adi ve sifreyi girdikten sonra submit butonuna bastigimda birsey olmuyor.

soyle ki:
submit butonunun onclick olayinda login() methodumu cagiriyorum. javascriptte login function um var o da login webmethodunu cagiriyor.
 Login methodum static ve webmethod. fakat debug da buraya hic dusmuyor. nasil birsey yapmam gerekiyor submit butonunda
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor