Membuat Tooltip dengan CSS Pseudo-Element

CSS Tooltip
Tooltip dengan CSS3

Toooltip. Secara umum dapat dibuat dengan cara menyisipkan atribut title='' pada elemen seperti ini:

<a href='http://latitudu.blogspot.com' title='Saya adalah tooltip'>Saya memiliki tooltip</a>

Namun di sini Saya hanya ingin memberikan pengetahuan bahwa tooltip juga sebenarnya dapat diperbaiki tampilannya hanya dengan bermodalkan CSS Pseudo-Element:

Lihat Demo

Berikut ini adalah kode CSS untuk memproduksi tooltip dari atribut title:

*[title]:before {
  content:attr(title);
  position:absolute;
  z-index:10;
  width:auto;
  bottom:100%;
  left:0;
  margin-bottom:3px;
  background:#000;
  color:#fff;
  font-size:11px;
  font-weight:normal;
  text-shadow:none;
  padding:4px 10px 5px;
  opacity:0.8;
  filter:alpha(opacity=80);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

*[title]:hover {position:relative;}

*[title]:hover:before {
  display:block;
}

Selektor *[title]:before akan menyeleksi semua elemen yang mengandung atribut title='' di dalamnya, kemudian akan menyisipkan sebuah elemen palsu yang berisikan nilai dari atribut title='' tersebut (dalam hal ini, kode yang dimaksud adalah content:attr(title)). Namun, deklarasi display:none; akan menyembunyikan wujud elemen palsu tersebut, hingga pada akhirnya pointer diletakkan di atas elemen yang mengandung atribut title='' tersebut, barulah elemen palsu akan ditampilkan (display:block;).

Untuk tingkatan lebih lanjut, CSS ini sebenarnya juga bisa digunakan untuk menampilkan isi dari atribut lain, misalnya href=''. Caranya cukup dengan mengganti semua selektor atribut title dan nilai content dengan href seperti ini:

*[href]:before {
  content:attr(href);
  position:absolute;
  z-index:10;
  width:auto;
  bottom:100%;
  left:0;
  margin-bottom:3px;
  background:#000;
  color:#fff;
  font-size:11px;
  font-weight:normal;
  text-shadow:none;
  padding:4px 10px 5px;
  opacity:0.8;
  filter:alpha(opacity=80);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

*[href]:hover {position:relative;}

*[href]:hover:before {
  display:block;
}

Jika kode di atas yang diterapkan, maka tooltip yang ditampilkan adalah berupa alamat URL. Ini jika kamu menghendaki alamat URL yang dimunculkan sebagai tooltip, bukannya nilai dari atribut title='' seperti pada umumnya.

5 Komentar

  • Unknown

    Wah info bagusi ni ..
    kebetulan CSS memang kesukaan saya ..

  • Anonim

    Wah menarik nih gan ,..
    Btw tapi knpa tooltip bawaan masih muncul yaa . yang warna putih gan .. -__-
    Solusi nya yaa ...

  • Taufik Nurrohman

    Pakai atribut HTML5 data-*. Pakai nama data-title saja supaya mudah diingat:

    <a href="#" data-title="Saya adalah tooltip!">Teks Tautan</a>

    Nantinya, teks tooltip akan diambil dari atribut data-title, jadinya seperti ini:

    *[data-title]:before {
    content:attr(data-title);
    position:absolute;
    bottom:100%;
    left:0;
    z-index:10;
    margin-bottom:3px;
    background-color:black;
    color:white;
    font-size:11px;
    font-weight:normal;
    text-shadow:none;
    padding:4px 10px 5px;
    width:auto;
    white-space:nowrap;
    display:none;
    }
    *[data-title]:hover {position:relative}
    *[data-title]:hover:before {display:block}
  • IRIL SAGITA

    Kak, jika ingin menambahkan efek transisi gimana caranya ?

  • Taufik Nurrohman

    Ganti properti display dengan visibility dan opacity:

    body {padding-top:50px}
    a[title] {position:relative}
    a[title]:before {
    content:attr(title);
    position:absolute;
    z-index:10;
    width:auto;
    bottom:100%;
    left:0;
    margin-bottom:10px;
    background:#000;
    color:#fff;
    font-size:11px;
    font-weight:normal;
    text-shadow:none;
    padding:4px 10px 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
    visibility:hidden;
    opacity:0;
    }
    *[title]:hover:before {
    margin-bottom:3px;
    visibility:visible;
    opacity:.8;
    }

    Demo: Pure CSS Tooltip

Komentar telah ditutup.