22-06-2017 19:10
My Wapmaster merupakan layanan online umpan web, yang terdiri dari tools atau alat pengelola untuk blogger, serta tutorial publikasi lain yang berbasis web.
Tips : Jika mendapati halaman blank ( blank Page ) silahkan gunakan halaman VERSI NORMAL Kami. tq

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>


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.4 Out Of 5
Total Votes: 294
Your Rating:

Copy Url

Shortlink

My Wapmaster
Rating 4 stars
Deskripsi "Free Online Tools And Generator"
Author
Keywords wapmaster, script, tools and generator, Css, Xtgem, Blog Mobile, Mywapblog

Sharing Is Caring


Join And Backlink

HomeChatbox
Wapmaster ServiceContact
PartnersBlog
Buku TamuPrivacy
main menu Buat Menu Sendiri Dan Dapatkan 350 Backlink Gratis Disini main menu

Info Pengunjung
Country United States
I.p23.20.54.196
Host ec2-23-20-54-196.compute-1.amazonaws.com
Layar
Kunjungan 1
BrowserCCBot/2.0

Social



android.png Adroid App

Berlangganan Via Email

Delivered by FeedBurner

Daftar dan sebarkan penyingkat link url Anda, langsung dapat Dollar Daftar Sekarang

Mau pasang iklan tapi ga punya Paypal, gimana mencairkannya, jadikan pulsa saja, caranya daftar disini

Wapsite ini sepenuhnya dibuat menggunakan ucweb, download dan browsing super cepat, berikut link download aplikasinya


Menu Cepat

23 jenis list style pada Css, apa saja itu?
Donnarumma: Mengapa Fans AC Milan Membantai Saya?
sang begal komentar xtgem itu bernama badwords
Template sederhana responsive 3 kolom
cara ampuh memindah xt auth subscribe xtgem

Back
Translate this page