[10TL.NET] Mybb temanıza basit tooltip ekleyin çok kolay

[Muratbaykam]

Evet dostlar bu konumuz da siyah baloncuk yani bir linkin üzerine geldiğimiz de veya bir yazının nasıl üstün de baloncuk çıkar yani tooltip yapımını göstereceğim.

Dostlar ilk olarak bir css kalıbı oluşturmamız gerekiyor hemen oluşturalım :

Başlangıç » Temalar & Stiller » TEMANIZ » CSS Oluştur

Kendi içeriğimi yazmak istiyorum > bu kodu yapıştırın :

Kod: Tümünü Seç Tümünü Kopyala

.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: #555;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 50%;
   margin-left: -60px;
   opacity: 0;
   transition: opacity 0.3s;
}

.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;
}

.tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
}

Evet çok kolaydı değil mi ? şimdi tooltip ekleyelim herhangi bir yazı olur örneğin ben navigasyona ekleyeceğim. (Tabii ki de araba navigasyonu değil :D )

Resim de gördüğünüz gibi ben faremi götürdüğüm an tak baloncuk geliyor.(çaktırmayın o yazı bana ait )



Peki nasıl yaptık ?

İlk olarak mesela bir classımız olsun :

Kod: Tümünü Seç Tümünü Kopyala

<div class="test"></div>

Şimdi biz bunu şöyle yapıyoruz :

Kod: Tümünü Seç Tümünü Kopyala

<div class="test tooltip"></div>

Bunu yaptıktan sonra şu şekle getiriyoruz :

Kod: Tümünü Seç Tümünü Kopyala

<div class="test tooltip">
<span class="tooltiptext">Uhhuu bebeğim ben bir tooltipim :D</span>
Deneme yazısı adamım !
</div>

Bu kadar kolaydı böyle konuların devamı gelecek :)

[leojely]

Eline sağlık.

[Samet_pro]

Eline sağlık

[pro35x]

@Murat#Baykam discorda gelsene rica ettigim su portları acsan ben ciğerim

[#JustWatch]

Uhhuu bebeğim ben bir tooltipim :D