Cami Halısı Avrupada Lider Firma Gülseven Halı

Arçelik Güvenilir Servis Hizmetleri

Arçelik Buzdolabı Servisi

WordPress Eklentiye ait Klasör Dizin Adresi Öğrenebileceğiniz Kodlar

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

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

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

Filtreli Arama Tablo Yapımı

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

Filtreli Arama Sistemi Yapımı

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

Popup Resim Galeri Modülü Yapımı

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

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
308 Görüntülenme
Bunlar da var!
Youtubeda En Çok İzlenen 10 Video

Youtubeda En Çok İzlenen 10 Video

28 Haziran 2015
150 Görüntülenme
Tır Hemzemin Geçitte Kalınca [Video]

Tır Hemzemin Geçitte Kalınca [Video]

1 Şubat 2016
124 Görüntülenme
Müjde: Fallout, Androide de geliyor

Müjde: Fallout, Androide de geliyor

22 Haziran 2015
89 Görüntülenme
Brain it on the truck! – 39. Bölüm – 1. Dünya

Brain it on the truck! – 39. Bölüm – 1. Dünya

22 Kasım 2016
156 Görüntülenme