CSS İle ToolTip Yapımı

Merhaba Arkadaşlar,
Yeni birçok websitesinde karşılaştığım özellikle bilgilendirme amaçlı kullanılan “Tooltip” konusuna bir örnekte ben anlatacağım.
Ben bir menü üzerinde konuyu analatıcam, siz menü olabilir linklerinizde ve birçok yerde kullanabilirsiniz.Zamandan kazanmak için menümüzü ücretsiz servisler ile yapabiliriz.

Menümüzü oluşturup HTML dosyamıza yerleştiriyoruz ve daha sonra tooltip için css kodlarımızı yazıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.tooltip {
position:relative; z-index:24; /*Elementin pozisyon ayarları*/
}
.tooltip span {
display:none; /*Display kodu ile birçok tanım yapılabilir, elementi blok şekle getirme,görünmez yapma,sıralama vs.*/
}
.tooltip:hover {
z-index:25; /*Elementin pozisyon ayarları*/
}
.tooltip:hover span {
display:block; /*Display kodu ile birçok tanım yapılabilir, elementi blok şekle getirme,görünmez yapma,sıralama vs.*/
position:absolute;  /*Elementin pozisyon ayarları*/
top:30px; /*Elementin pozisyon ayarları*/
left:20px; /*Elementin pozisyon ayarları*/
width:200px; /*Elementin genişliği*/
background:#FCFBDC; /*Zemin rengi*/
border:1px solid #000; /*Elementin dış kenarlık çizgisi*/
padding:5px; /*Elementin kendi içinde ölçülendirilmesi*/
font:normal 9px Verdana, Arial, Helvetica, sans-serif; /*Metin Sitili*/
color:#333333; /*Renk*/
}

Evet tüm kodların yanına açıklamasını yaptım kafanıza takılan bir yer olursa yorumlar ile sorabilirsiniz.Şuan elde ettiğimiz görüntü;

Peki biz bunu kullanışlı hale getirip şekillendirelim;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.tooltip-yeni {
position:relative; z-index:24; /*Elementin pozisyon ayarları*/
}
.tooltip-yeni span {
display:none; /*Display kodu ile birçok tanım yapılabilir, elementi blok şekle getirme,görünmez yapma,sıralama vs.*/
}
.tooltip-yeni:hover {
z-index:25; /*Elementin pozisyon ayarları*/
}
.tooltip-yeni:hover span {
display:block;/*Display kodu ile birçok tanım yapılabilir, elementi blok şekle getirme,görünmez yapma,sıralama vs.*/
z-index:25; /*Elementin pozisyon ayarları*/
position:absolute; /*Elementin pozisyon ayarları*/
top:30px;  /*Elementin pozisyon ayarları*/
left:20px; /*Elementin pozisyon ayarları*/
width:270px;  /*Elementin genişliği*/
background:#cdffdc url(ok.png) no-repeat left;/*Zemin Resmi - no-repeat kodu ile resmin tekrar etmesi engellenir ve left koduylada sol tarafa sabitlenir*/
border: 1px solid #24a249; /*Elementin dış kenarlık çizgisi*/
padding:5px 5px 5px 35px; /*Elementin kendi içinde ölçülendirilmesi*/
color:#000; /*Renk*/
text-decoration:none; /*Metin Sitili */
font:normal 10px Verdana, Arial, Helvetica, sans-serif; /*Metin Sitili*/
}

Bir kaç css kodu ekliyerek bu hale getirdik;

Evet arkadaşlar CSS ile Tooltip yapımını anlatmaya çalıştım.Siz kodları geliştirip daha güzel tooltipler yapabilirsiniz.
Hepinize Kolay Gelsin.

Atiberk.Org - Tooltip Örnek

Kategoriler: Web Tasarım - Programlama
Etiketler: , ,
Toplam Okunma Sayısı 434 | Bugün Okunma Sayısı 4
Konu Yayınlanma Tarihi: 11 Eylül 2008, 04:40
Yazıya Yapılan Yorumlar İçin RSS

22 Yorum Yapılmış

  1. 1

    Çağrı
    Perşembe 11 Eyl 2008 9:04 am

    süper anlatmışssın teşekkürler

  2. 2

    DesTRoyeR
    Perşembe 11 Eyl 2008 9:11 am

    sagoalsın berkan

  3. 3

    Mehmet Selim
    Perşembe 11 Eyl 2008 10:43 am

    Güzel anlatım olmuş berkan makale paylaşımı için teşekkürler. Dikkatimi çeken sitende yazının üstüne gelince tooltip çıkması yani aynı şeyi bir daha göstermesinin anlamı ne ? toolpit’in kullanım alanı olarak resimlerin açıklamasında kullanılması daha mantıklı geliyor.

  4. 4

    ATiB3RK
    Perşembe 11 Eyl 2008 12:48 pm

    Evet Selim yorumunu dikkate alıcam bu tooltipleri gerektiği yerlerde kullanıcam dostum :)

  5. 5

    Mehmet Selim
    Perşembe 11 Eyl 2008 1:27 pm

    Tamam berkan dikkate aldığın için teşekkürler.

  6. 6

    xSS-ErrOr
    Perşembe 11 Eyl 2008 2:50 pm

    Bu download şeysini bununlamı yaptın Berkan.

  7. 7

    ATiB3RK
    Perşembe 11 Eyl 2008 3:10 pm

    Hayır xSS download class’ı başka bir olay :)

  8. 8

    eylos
    Perşembe 11 Eyl 2008 9:35 pm

    Yorumların üzerinde olan geri izleme, besleme, yorumlar, benzer yazılar, sosyak imleme gibi ajax css olayı yapmışsın. Bu hazır bir eklenti mi yoksa sen mi yazdın.

  9. 9

    ATiB3RK
    Perşembe 11 Eyl 2008 2:28 pm

    Hepsini Kendim Kodladım eylos.

  10. 10

    Müjdat Korkmaz » MK » Web’den Seçtiklerim #2
    Perşembe 11 Eyl 2008 8:42 pm

    [...] CSS İle ToolTip Yapımı # [...]

  11. 11

    Uskan
    Perşembe 11 Eyl 2008 6:07 pm

    güzel anlatım ati

  12. 12

    0fLy
    Perşembe 11 Eyl 2008 12:33 am

    KraLsın yHa
    Helal Olsun Ne diim daha

  13. 13

    0fLy
    Perşembe 11 Eyl 2008 12:54 am

    De bu dosyaları nereye atcaz:D

  14. 14

    ATiB3RK
    Perşembe 11 Eyl 2008 11:44 am

    Yapacağın şablonun yada herhangibir tasarıma entegre etmek istiyorsan şablonun style.css(sitil dosyası) dosyasına ekliyceksin ve html’e kodlarını ekleyerek çalışır duruma getirebilirsin.

  15. 15

    0fLy
    Perşembe 11 Eyl 2008 1:28 pm

    Bak Ati IzzyMenu den ben bir menü yapıp indirdim simdi bu inen dosyaları ne yapcağımı bana söyler misin

    plss.. :-)

  16. 16

    ATiB3RK
    Perşembe 11 Eyl 2008 8:45 pm

    Kodları biraz incelersen anlarsın zaten.CSS kodlarını menunun css dosyasına yapıştır bundan sonra tek yapman gereken menudeki a href="#" koduna tooltip classını eklemek yani a href="#" class="tooltip" Bu kadar…. :)

  17. 17

    0fLy
    Perşembe 11 Eyl 2008 10:01 pm

    Fakat Benim yaptıgım tooltip mi bilmiyorum senın sitendeki Menüyü yapmaya calıstım sende IzzyMenu den yapmıssın aynısı orda var.Bende onu yapmak istiyorum daha farklı bişey Lütfen yardımcı ol dediklerinden hiç bişi anlamadım Lutfen Ati

  18. 18

    ATiB3RK
    Perşembe 11 Eyl 2008 10:46 pm

    Evet bende menüyü ordan aldım 0fLy.Anlattığım gibi olay yani daha nasıl yardımcı olurum bilmiyorum :S

  19. 19

    0fLy
    Perşembe 11 Eyl 2008 11:24 pm

    Bu anlattığın tooltip(baloncuk) menu ıcınde aynı seyı mı yapcaz

  20. 20

    ATiB3RK
    Perşembe 11 Eyl 2008 11:55 pm

    Evet değişen bişi yok örneğe bakarak yapabilirsin :)

  21. 21

    0fLy
    Perşembe 11 Eyl 2008 12:16 am

    Bak şimdi ati ben su ornekte verdıgın ıkıncı kutudakı kodları style.css dosyasının en alt tarafına ekledım fakat hıc bısı olmadı

  22. 22

    0fLy
    Perşembe 11 Eyl 2008 1:17 pm

    Bak Ati şöyle yapalım ben sana gerekli dosyaları atım sen gerekeni yap sonra bende ftp ye atarım onları olur mu he Ati :)

Yorum Yazın

« Wordpress Outbrain Kurulumu Firefox İçin Google Chrome Teması »