Date Image Saturday, October 17, 2009 | Kategoriler | Javascript, Tümü

Jquery İle Linklerde Özelleştirilmiş Tooltip Kullanmak

   Hepimiz, web sayfalarımızda linklere title  ataması yaparız. Bunu yapmak, link üzerine mouse ile gelindiğinde title için yazdığımız yanının görüntülenmesini sağlar. Bu özelliğin standart görüntü ile değil de sitemize uygun stillerle görüntülenmesini sağlayabiliriz. Bu noktada Jquery bize çok yardımcı oluyor.

<script src="jquery-1.3.2.js" type="text/javascript"></script>

<script src="jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>

<script src="tooltip.js" type="text/javascript"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

Sayfanın <head></head> tagleri arasına ilk olarak jquery kütüphanesini ve sonra da jquery için yazılmış olan plugini ekledim.tooltip.js ise linklerimize özelleştirilmiş tooltip eklemek için gerekli olan javascript kodlarını içeriyor. Linklerin daha güzel görünmesi ve butona benzemesi için de style.css i oluşturdum.

<div style="text-align:center;padding:200px;">

    <a href="http://www.serdarsert.com" title="Serdar Sert - Microsoft & .Net Teknolojileri" >Siteyi ziyaret et</a>

</div>

Sayfada görüntülenecek linki de title özelliği ile <html> tagi içine yazdım.burdaki div; linkin sayfanın tam ortasında görünmesi için gereklidir.Siz kullanmayabilirsiniz.

tooltip.js javascript dosyamızın içeriği de;

$(function() {

    $('a[title]').qtip({

        position: {

            corner: {

                target: 'leftTop',

                tooltip: 'rightBottom'

            }

        },

        style: {

            border: {

                width: 3,

                radius: 5,

                color: '#000000'

            },

            background: '#ffffff',

            color: 'DarkRed',

            padding: 10,

            textAlign: 'left',

            tip: true

        }

    });

});

Burda önemli olan target ve tooltip propertyleri var. Ben tooltipin, linkin sol üst köşesinde görünmesini istediğimden leftTop olarak belirttim.tooltip i ise rightBottom olarak belirtmemin nedeni ise tooltip solda olacağı için tip dediğimiz küçük okun sağ alt köşede bulunmasını sağlamak.

Gördüğünüz üzere tooltipleri oluşturmak çok basit.Bu konuda jquery gerçekten çok başarılı.

Sonuç :

 Jquery Custom Tooltip

Örnek Script Dosyası

Etiketler :