Türk Telekom, Açık Şebeke Otomasyon Platformu (ONAP)’na üye oldu

SanalUzman.com’dan serbest çalışanlara (freelancer) 10 öneri

WordPress Temada Kategorileri Listeleme

PHP Hazır Gelişmiş CURL Kütüphanesi

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

  • Hazır Site Bileşenleri
  • Savaş Dersim Çelik
  • Cumartesi Aralık 24th, 2016
  • 872 Görüntülenme
  • HTML, CSS, Javascript
  • Responsive

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ış.

Benzer İçerikler