Disneyland 1972 Love the old s
MY
WAPMASTER

Free Online Tools And Generator

Contact
my wapmaster selekeh

Tips
Jika mendapati halaman blank ( blank Page ) silahkan gunakan halaman VERSI DASAR Kami. ×

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


Tooltip Top Tooltip text

<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 Tooltip text

<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 Tooltip text

<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 Tooltip text

<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

Tutorial Css Lainnya



Total Average Rating:
star star
2.3 Out Of 5
Total Votes: 415
Your Rating:

My Wapmaster
Rating 4 stars
Deskripsi
Author
Keywords Generator, Widget, wapmaster tools

Share
Navigation


My Wapmaster merupakan Wapsite layanan online umpan web, yang terdiri dari tools atau alat pengelola untuk blogger, serta tutorial publikasi lain yang berbasis web.

Random Berita

Iraq ferry sinking: 'More than 70 dead' in Tigris river
Stapac Kalahkan Satria Muda di Game Pertama Final IBL
sang begal komentar xtgem itu bernama badwords
Css Konten jadi Menghilang Dengan Tombol Ex
Rumus Menghitung Em Dan Px Dalam Css
Monkey birth a step to saving fertility of boys with cancer