Mr. Techie Web Site Tasarımı

Level 2.0 Web Site Tasarımı

Health Care Web Site Tasarımı

Animals & Pets Web Site Tasarımı

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

Hazır Site Bileşenleri Cumartesi Aralık 24th, 2016
485 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

Salı Ocak 17th, 2017
1.649 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

Salı Ocak 17th, 2017
656 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

Salı Ocak 17th, 2017
1.388 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

Salı Ocak 17th, 2017
1.686 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

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

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

Pazar Aralık 18th, 2016
611 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

Cuma Aralık 16th, 2016
563 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

Pazar Aralık 11th, 2016
582 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

Cumartesi Aralık 10th, 2016
654 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

Cuma Aralık 9th, 2016
528 Görüntülenme
Bunlar da var!
Tipinizi Değiştiren 3 İlginç Ürünü Test Ettik

Tipinizi Değiştiren 3 İlginç Ürünü Test Ettik

Pazartesi Mayıs 9th, 2016
241 Görüntülenme
ABDde iki Türkün geliştirdiği MONA, e-ticaretin Sirisi olmak istiyor

ABDde iki Türkün geliştirdiği MONA, e-ticaretin Sirisi olmak istiyor

Çarşamba Temmuz 8th, 2015
232 Görüntülenme
Tamamen İlkel Ok ve Yay Yapımı

Tamamen İlkel Ok ve Yay Yapımı

Salı Mart 22nd, 2016
302 Görüntülenme
Samsung orta seviye cihazlar için Exynos 7870 işlemcisini duyurdu

Samsung orta seviye cihazlar için Exynos 7870 işlemcisini duyurdu

Çarşamba Şubat 17th, 2016
283 Görüntülenme
WordPress SearchAutocomplete Eklentisi

WordPress SearchAutocomplete Eklentisi

Pazar Mayıs 31st, 2015
321 Görüntülenme
WhatsApp kullanıcılarına kötü haber!

WhatsApp kullanıcılarına kötü haber!

Çarşamba Mayıs 20th, 2015
185 Görüntülenme