Öneri ve Hata Raporu



Günün Sözü Sevemez kimse seni benim sevdiğim kadar

kategori CSS
oylama 2.9/5 yorum 1 yorum yazar Hakan Taşan tarih 25 Haziran 2015

Açıkçası bu yazıyı hangi kategori altında açacağıma karar veremedim çünkü içerisinde hem bolca CSS kullanacağız hem de HTML5'in getirdiği data özelliklerini kullanacağız. Üzerine gelince açılan pencereler hakkında nette muhtelif örneklerini bulmak mümkün, bu yazıda üzerine gelince açılan tooltip örneklerini paylaşacağım. Tooltip bir yazının veya kelimenin üzerine gelince açılan yardımcı pencerelerdir. Örnek olarak mouse ile bir bağlantının üzerine gelince beyaz veya sarı kutucuk açılır. Diğer bir örnek ise bu sitenin iletişim sayfasında e-mail kısmında bulunan soru işareti üzerine gelince gri ipucu veren bir pencere açılır. Ancak tooltip'i toggle ile karıştırmamak gerekir çünkü yeni bir div penceresi oluşturmayacağız. İşte bunları CSS'nin content özelliği, before ve after seçicilerinden, HTML5'in de data-* özelliklerinden faydalanıp yapacağız. Size önceden geliştirdiğim 2 örnekle açıklamaya çalışacağım. Not: Bütün tarayıcılar bu özellikleri desteklemeyebilir, o yüzden kullanıp kullanmamak size kalmış.

Örnek 1) Oluşturulan Görüntü

Resimde görüldüğü gibi mouse imleci "phileo" kelimesinin üzerine getirildiğinde ipucu penceresi açılıyor. Öncelikle HTML kodlarımızı yazalım.

HTML Kodu

<div id="mesaj">
    <p>
        Felsefe, sözcük köken olarak Yunanca <a class="aciklama" href="#" data-title="sevgi anlamına gelir">"phileo"</a> 
        ve <a class="aciklama" href="#" data-title="bilgi, bilgelik anlamına gelir">"sophia"</a>
        sözcüklerinden türeyen entelektüel faaliyet ve disiplindir.
    </p>
</div>

 

Şimdi tasarımın güzel olmasını sağlamak için oluşturduğumuz div alanının CSS kodlarını yazalım. Tooltip ile bir ilgisi yoktur, tasarımla ilgilidir.

CSS Kodu

#mesaj
{
    font-family: Calibri, Arial, sans-serif;
    font-size: 20px;
    width: 500px;
}

#mesaj a
{
   text-decoration: none;
   color: #000;
}

 

Ve şimdi bütün işleri yapan CSS kodlarını yazalım. after seçicisiyle tooltip penceresinin ayarlarını yapıyoruz. Ayrıca content ile data-title'da bulunan yazıyı çekiyoruz. İlk başta tooltip'i opacity'i 0 yaparak göstermiyoruz. hover::after ile mouse üzerine gelince opacity otomatik olarak 1 olacak ve tooltip açılacaktır. Buna ek olarak bazı açılış efektleri eklendi. Tooltip penceresinin yazının neresinde açılacağını kendinize göre ayarlayabilirsiniz.

CSS Kodu

.aciklama
{
    position: relative;
    display: inline-block;
}

.aciklama::after
{
    content: attr(data-title);
    position: absolute;
    top: 100%;
    left: -50%;
    padding: 15px;
    background: #eee;
    color: #333;
    opacity: 0;
    word-wrap: break-word;
    height: auto;
    width: 200%;
    -moz-box-shadow: 0 0 4px #222;
    -webkit-box-shadow: 0 0 4px #222;
    box-shadow: 0 0 4px #222;
    pointer-events: none;
}

.aciklama:hover::after
{
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
    pointer-events: auto;
}

 

onizleme

Örnek 2) Oluşturulan Görüntü

Bu örnekte ilkine ek olarak en üste bir şerit koyduk. Yine aynı şekilde "yazının" kelimesinin üzerine gelince ipucu penceresi açılıyor.

<div id="mesaj">
    <p>
        Ele aldığı ve işlediği konular göz önünde tutularak felsefe birçok disipline ayrılmıştır. O disiplinlerden bazılarını 
        <a class="aciklama" href="#" data-title="Ahlak Felsefesi, Din Felsefesi, Sanat Felsefesi, Varlık Felsefesi, Bilgi Felsefesi ...">bu yazının</a>
        üzerine gelerek okuyabilirsiniz.
    </p>
</div>

 

Tooltip ile alakası olmayan CSS tasarım kodlarını yazalım.

CSS Kodu

#mesaj
{
    font-family: Calibri, Arial, sans-serif;
    font-size: 20px;
    width: 450px;
}

#mesaj a
{
    text-decoration: none;
    color: #000;
}

 

Ve şimdi asıl CSS kodlarını yazalım. Yine aynı şekilde after seçicisiyle tooltip penceresinin ayarlarını yapıyoruz ve tooltip'in üstünde görünecek şerit resmini yüklüyoruz. content ile data-title'da bulunan yazıyı çekiyoruz. İlk başta tooltip'i opacity'i 0 yaparak göstermiyoruz. hover::after ile mouse üzerine gelince opacity otomatik olarak 1 olacak ve tooltip açılacaktır. Bazı açılış efektleri eklendi. Tooltip penceresinin yazının neresinde açılacağını kendinize göre ayarlayabilirsiniz.

.aciklama
    {
    position: relative;
    display: inline-block;
}

.aciklama::after
{
    content: attr(data-title);
    position: absolute;
    top: -50px;
    left: 80px;
    padding: 45px 15px 15px 15px;
    opacity: 0;
    word-wrap: break-word;
    background: #fff url(header.png) no-repeat;
    background-size: 101% 25%;
    font-size: 20px;
    height: auto;
    width: 400px;
    -moz-box-shadow: 0 0 4px #222;
    -webkit-box-shadow: 0 0 4px #222;
    box-shadow: 0 0 4px #222;
    pointer-events: none;
}

.aciklama:hover::after
{
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
    pointer-events: auto;
}

 

onizleme

Son olarak bu örnekte kullanılan şerit resmini ve 3 tane farklı renkteki şerit resimlerini paylaşıyorum.

indir

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

1 Yorum


yorum

Gökhan KARTAL

29 Aralık 2015 18:11


data-title kısmına fonksiyon çağırabilir miyiz? (içeriği php işlemlerden oluşan)

yorum

Admin

29 Aralık 2015 19:58


elbette çağrılabilir, data-title kısmına php fonksiyonunu döndürebilirsiniz.

yorum

Ayben Şensoy

15 Ekim 2016 23:05


Fare imleci, ekran üzerinde, her hangi bir yere geldiğinde, sürekli olarak, imlecin yanında, küçük bir kutu açılıyor ve bu açılan kutuda bilgilendirme yazısı oluyor. Bu kutucuğun açılmasını nasıl engelleyebiliriz. Windows 10 kurulu. Ama etkinleştirme yapılmadı.

yorum

Admin

16 Ekim 2016 01:05


Merhaba, eğer websitesi üzerinde açılan kutucuklardan bahsediyorsanız bizim yapabileceğimiz bir şey yok maalesef. windows'taki kutucuklardan bahsediyorsanız örneğin kısayol üzerine gelince açılan kutucuk gibi, bir yöntem var dener misiniz. Kayıt defterini açıp [HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Explorer\\Advanced] yoluna gidin ve ShowInfoTip değerini 0 yapın. 1 yaparsanız kutucuklar görünür tekrar.


yorum

Mahmut Kerim

01 Kasım 2016 09:34


Alt alta iki tane yazı koydum ve bunu uyguladım fakat üstteki yazıya gelince açılan kutu alttaki yazının altında kalıyor nasıl bunu düzeltebilirim?

yorum

Admin

01 Kasım 2016 11:18


Merhaba Mahmut Bey, css kodlarındaki aciklama::after kısmına z-index: 999 eklerseniz sorununuz çözülmüş olur.

yorum

Enes Ergel

15 Ocak 2017 11:50


Hocam iyi günler.Kodunuzu blog sayfamda şekildeki gibi kullanmaya başladım. http://genculinews.blogspot.com.tr/p/galeri_15.html

Ancak kutucuğun dikeyleme uzamasından hoşnut değilim.Kelimeye,açıklamaya göre uzunluğu olsa güzel olur.Bunu yapabilir miyiz.İlginiz ve paylaşımınız için teşekkür ederim.

yorum

Admin

15 Ocak 2017 13:50


Merhaba hocam, yanlış anlamadıysam açıklamanın alt satıra geçmemesini istiyorsunuz. bunun için .aciklama::after içerisinde birkaç değişiklik yapacağız. bu sayede yazının birden çok satırdan oluşmasını engelleyeceğiz. eğer çok uzun bir açıklama yazınız yoksa bu kodlar sorununuzu çözecektir.


white-space: nowrap; // bu satırı ekleyin
word-wrap: break-word; // bu satırı silin
width: auto; // auto olarak değiştirin


yorum

Enes Ergel

17 Ocak 2017 10:21


Çok teşekkür ederim iyi çalışmalar :)

yorum

Eren Sevinç

05 Mart 2017 13:07


data-title="" arasına buton ve div eklemek istiyorum nasıl ekleyebilirim

yorum

Admin

05 Mart 2017 15:12


merhaba hocam, data-title ile istediğinizi yapmak mümkün değil çünkü sadece string bir değer alabilir. ama şu linkte tam istediğiniz şekilde bir örnek var, incelemenizi tavsiye ederim.

https://www.w3schools.com/howto/howto_css_tooltip.asp

yorum

İkbal

17 Nisan 2019 15:24


merhaba,ben açılan kutucuğa resim eklemek istiyorum ama nasıl yapabilirim?

yorum

Admin

18 Nisan 2019 19:12


Merhaba, https://www.w3schools.com/howto/howto_css_tooltip.asp adresindeki tooltip örneğini kullanabilirsiniz. aşağıdaki kodu kendinize göre düzenleyebilirsiniz.

<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<br><br><br><br>
<div class="tooltip">Hover over me
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="tooltiptext">
</img>
</div>
</body>
</html>