jQuery ile Basit Tooltip Örneği Hazırlayalım

Bu dersimizde çoğu zaman projelerimizde lazım olan tooltip örneğinin, jquery ile nasıl basitçe hazırlanacağını göreceğiz.. Yararlı olması dileğiyle..

Canlı Demo;

Kaynak Dosyayı İndirin;
http://yadi.sk/d/3aVaeK2Q0jcjx

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“jQuery ile Basit Tooltip Örneği Hazırlayalım” üzerine 16 yorum

  1. Tayfun yine güzel bir anlatım olmuş anlatımına sağlık. Yalnız bu ve diğer dersleri verimli şekilde kullanabilmek ve daha pratikleşebilmek adına , ufak bir jquery eklenti yapımı anlatsan tadından yenmez 🙂 hani bir eklentimiz olsun , ('.sinif').benimeklentim({ ozellik: 200px}); gibi özellik atayabilmeli minik birşey yapmayı anlatırsan biz ordan alır yürürüz : )

  2. teşekkürler Tayfun hocam yine faydalı bir ders anlatımı olmuş kitabları kurcalarken bu kadar şey öğrenmiyorum uygulamarı sende görünce o zaman flash çakıyor işte..

  3. Daha önceki derslerinde vardı sanki. Ama tekrardan bir anlatım bence de hiç fena olmaz. Bu arada ellerine sağlık. Bu ve diğer tüm derslerin için…

  4. Sanmıyorum, mehmet daha önce hazırladı buna benzer bir şey ama tam olarak böyle değildi. Hem ne fark eder ki, hazırlamış olsam da?

  5. abi selam, derslerini izliyorum, çok iyi anlatıyorsun gerçekten. sana sormak istediğim şey şu abi, dersleri anlatmadan önce ne kadar pratik yapıyorsun. heralde şunu anlatayım diye oturmuyorsundur pc başına, önce bir hazırlık yapıyorsundur. neler yapıyorsun mesela, anlatacağın kodları tekrar tekrar yazıyormusun, ya da ne anlatacağını tekrar tekrar kendi kendine anlatıyormusun, notlar alıyormusun, şuna değinicem buna değinicem gibi. ^^

  6. Eğer daha önceden bildiğim bir konu ise pek hazırlık yapmıyorum, direk oturup başlıyorum derse 🙂 Bilmediğim bir konu ise biraz araştırıyorum tabi farklı kaynaklardan, bilgilerin doğruluğunu kontrol etmek için.

  7. kodda ufak bir sorun var. $(this).children(".tooltip").hide(); bu satır eklenen tooltip div ini gizliyor ve yazının üzerine tekrar geldiğinizde yeni bir div ekliyor buda sayfada şöyle bir durum yaratıyor.

    <a data-tooltip="tooltip ipucu" href="#"> karar
    <div class="tooltip" style="top: 85px; left: 419px; display: none;">tooltip ipucu</div>
    .
    .
    .
    .

    <div class="tooltip" style="top: 85px; left: 419px; display: none;">tooltip ipucu</div>
    </a>

    bunu engellemek içinse $(this).children(".tooltip").hide(); satırında hide yerine remove(); kullanılması gerekir.

  8. Selam Serdar, evet çok haklısın. Bu durum dikkatimden kaçmış olmalı 🙂 Sürekli aynı şeyleri dom'a yüklemeye gerek yok, ya fare üzerinden gittiğinde remove() ile kaldırmalıyız, ya da fare üzerine geldiğinde tooltip nesnesinin var olup olmadığını kontrol edip ona göre yoksa eklettirmeliyiz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir