Türkiye Drone Ligi başlıyor

Artık Youtube’un da okulu var

Youtube Videolarını Arkadaşlarınızla Birlikte Canlı İzleyin!

28. Yılını Kutlayan WWW.’nin Yaratıcısından Ciddi Uyarı!

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

Hazır Site Bileşenleri 24 Aralık 2016
410 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
544 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

Filtreli Arama Tablo Yapımı

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

Filtreli Arama Sistemi Yapımı

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

Popup Resim Galeri Modülü Yapımı

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

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
436 Görüntülenme
Bunlar da var!
Çin Uzay Roketlerini Artırıyor

Çin Uzay Roketlerini Artırıyor

18 Mart 2015
201 Görüntülenme
Yoldan Geçen Somon Balıkları [Video]

Yoldan Geçen Somon Balıkları [Video]

25 Kasım 2015
178 Görüntülenme
Asus Laptop Alırken İlk Olarak PCDepo’ya Bakın.

Asus Laptop Alırken İlk Olarak PCDepo’ya Bakın.

18 Ağustos 2015
193 Görüntülenme