Turkcell ve Yandex, Yerli Arama Motoru ‘Yaani’ İçin Ortak Oldular

Hindistan’da Yenilenmiş Galaxy Note 7 Satılacağı İddiaları Yalanlandı

Apple, merakla beklenen yeni kampüsü Apple Park’ı Nisan’da açıyor

Microsoft, Windows 10’un ikinci büyük güncellemesinin de 2017 yılında geleceğini doğruladı

Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

Hazır Site Bileşenleri 24 Aralık 2016
337 Görüntülenme

Merhaba arkadaşlar bu konumuzda mause ile bir yazının üzerine geldiğimizde o konu ile ilgili ipucu verebileceğimiz bir sistemin nasıl yapabileceğinize dair kodları sizler ile paylaşacağız. Konu ile ilgili gerekli kodlara konu içerisinden ve gerekli kodların çalışır halde ki demosuna konu altında yer alan demo butonu ile ulaşabilirsiniz.

HTML Kodlarımız
<h2>İpucu</h2>
<p>Mause'yi metnin üzerine getirdiğinizde ipucu alanı görünecektir.</p>

<div class="tooltip">Mause'yi üzerine getir.
  <span class="tooltiptext">İpucu Metni</span>
</div>
CSS Kodlarımız
/* Webinyo.COM */
/* İpucu Alanı */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

/* İpucu Metni */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

/* İpucu Yerini Belirleme */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

/* İpucu Solma Efekti */
    opacity: 0;
    transition: opacity 1s;
}

/* İpucu Oku */
.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;
}

/* Araç ipucu alanı üzerine fareyi kullandığınızda ipucu metnini gösterin */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

 

Yorumlar

Henüz hiç yorum yapılmamış.

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

17 Ocak 2017
331 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

17 Ocak 2017
315 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

17 Ocak 2017
316 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

17 Ocak 2017
337 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

30 Aralık 2016
300 Görüntülenme
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

18 Aralık 2016
473 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

16 Aralık 2016
396 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

11 Aralık 2016
436 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
459 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
369 Görüntülenme
Bunlar da var!
Bir Selfie Denemesi Daha Ölümle Bitti

Bir Selfie Denemesi Daha Ölümle Bitti

5 Mart 2016
168 Görüntülenme
Fırtınanın Ortasında Kalan Gemi [Video]

Fırtınanın Ortasında Kalan Gemi [Video]

14 Şubat 2016
184 Görüntülenme
Merdivenli Kar Küreme Aracı [Video]

Merdivenli Kar Küreme Aracı [Video]

13 Şubat 2016
192 Görüntülenme
Güvenli İş Takip Sistemi Scripti

Güvenli İş Takip Sistemi Scripti

18 Şubat 2015
1.129 Görüntülenme