XtGem Forum catalog

Css Tooltip

W3schools.com - Sebuah tooltip sering digunakan untuk menentukan atau memperjelas informasi apa yang ditulis dari sang penulis, tooltip adalah teks tambahan dari satu informasi yang di utarakan.

Berikut ini tampilan tooltip dari berbagai arah, tooltip atas, kanan, bawah dan kiri, disini juga kami menyediakan kode yang dapat Anda gunakan dalam bentuk Css dan Html.

perlu diketahui tidak semua Browser dapat menikmati tooltip ini terutama Opera mini.
Arahkan kursor pada Text berikut untuk melihat tooltip, jika ingin penggunaan link cukup ubah teksnya dengan link.

Copy All Code


Tooltip Top Papa Syila 
<style>
.tooltiptop { 
    position: relative;
    display: inline-block;
   
}

.tooltiptop .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltiptop .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltiptop:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltiptop">Tooltip Top
  <span class="tooltiptext">Tooltip text</span></div>


Tooltip Right Papa Syila
<style>
.tooltipright {
    position: relative;
    display: inline-block;
  
}

.tooltipright .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}

.tooltipright .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.tooltipright:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltipright">Tooltip Right
  <span class="tooltiptext">Tooltip text</span></div>


Tooltip Bottom Papa Syila 
<style>
.tooltipbottom {
    position: relative;
    display: inline-block;
}

.tooltipbottom .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltipbottom .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltipbottom:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltipbottom">Tooltip Bottom
  <span class="tooltiptext">Tooltip text</span>
</div>


Tooltip Left Papa Syila 
<style>
.tooltipleft {
    position: relative;
    display: inline-block;
   
}

.tooltipleft .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
}

.tooltipleft .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}
.tooltipleft:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltipleft">Tooltip Left
  <span class="tooltiptext">Tooltip text</span>
</div>
Copy Semua Melalui



Bagikan Ke :