Tooltip Nasıl Yapılır? (Çözümü Burda)

Bazı web tarayıcıları title tanımlı nesnelerin üzerine gelince tanımlanan bilgileri gösterirler. Bir çok tasarımcı javascript ve css yardımıyla Araç İpucu geliştirerek farklı tipte ve çeşitte araç ipucu oluşturmaktadır ve oluşturmaya devam etmektedir. Biz burada sadece CSS ile Araç İpucu oluşturmayı göreceğiz. Bu metot yeni nesil tarayıcılarda sorunsuz çalışmaktadır.


Eğer Css Design Kullanıyorsanız style tagleri olmadan yazınız bölümüne

Başka tasarım kullanıyorsanız Tasarımın üstüne (<style></style> Tagleri Arasında)

Yazınız...

BU KODDAKİ KIRMIZI YAZIYLA YAZILMIŞ BÖLÜMLERİ KODDAN ÇIKARTARAK EKLEYİN...

Safari tarayıcısında bu kod çalışmamakta....



a.aracIpucu{
position: relative;
}

a.aracIpucu span {
display: none;
}

a.aracIpucu:hover span {
display:block;
position:absolute;
top:25px;
left:-5px;
width:200px;
padding:2px 6px;
border:1px solid #963;
background-color:#FF6;
color:#000;
}

a.aracIpucu:hover {
text-decoration:none;
font-size: 100%; /* IE5.x/Win duzeltmek icin */ KODUN İE DEDE GÖRÜNMESİ İÇİN
}

a.aracIpucu:hover span em {
position:absolute;
left:20px;
top:-6px;
width:11px;
height:6px;
background:#fff url(icon url si) 0 0; TOOLTİP E İCON EKLEMEK İÇİN
display:block;
font-size:1px;
}



ŞİMDİ ÖRNEĞİN SAYFA İÇERİSİNDE ŞU YAZIYI YAZALIM

Mistanbul Anlatımı Bir Konudur...

BU YAZI YERİNE HEMEN BU KODU YAZIYORUZ...TOOLTİP İN ÇALIŞMASI İÇİN...

KODA BAKARAK VE KODU EKLEDİĞİNİZDE ÇIKAN SONUCA BAKARAK BU SON YAZDIĞIMI DÜZENLEYİN...
______________
BİR BEDAVA-SİTEM KLASİĞİ... MİSTANBUL.TR.GGindirim kodu - discount code

çok güzel.
verdiğiniz örnekte mistanbulun üstünde geldiğimizde ayrıca bilgiler gözükecek sanırım.
böyle bir sistem mi?

evet...
______________
BİR BEDAVA-SİTEM KLASİĞİ... MİSTANBUL.TR.GGindirim kodu - discount code

kodlar yani css tekniği fatihhayrioglu ndan alınmış galiba ama anlatım sana ait olduğuna göre sorun yok
______________

yok hayır kodlarda değişiklikler var...
______________
BİR BEDAVA-SİTEM KLASİĞİ... MİSTANBUL.TR.GGindirim kodu - discount code

bu kodları sayfamızda nereye yapıştırıyoruz. herkes birşeyler söylemiş ama hangi kodu nereye yapıştıracağımızı söyleyen yok. web tasarım hakkında hiç bilgi sahibi olmayan insanların da bu siteden faydalanmak isteyeceğini hatırlatırım. teşekkürler