Cara Membuat dan Menggunakan ToolTip (CSS)

February 03, 2020   • 2 Comments

Pada postingan tutorial blogger kali ini adalah membuat Tooltip hanya dengan CSS.
Apa itu Tooltip ?
Tooltip merupakan sebuah tampilan teks ketika cursor diarahkan ke fitur atau item yang diberi tooltip, dan biasanya Tooltip digunakan pada sebuah website.

Tooltip kurang lebih fungsinya sama seperti title, yaitu menunjukan informasi tentang fitur atau item tersebut, tapi jika menggunakan Tooltip maka tampilan informasi fitur atau item tersebut jauh lebih menarik ketimbang menggunakan title. Dengan menggunakan Tooltip web kamu akan lebih terlihat lebih professional ketimbang web pada biasanya.

Biasanya untuk membuat Tooltip itu menggunakan Javascript ataupun Jquery, namun disini kita membuat Tooltip hanya dengan CSS aja, tanpa perlu menumpuk script diweb kamu. Untuk membuat Tooltip sederhana itu sangat mudah, nah jika kamu penasaran bagaimana cara membuat Tooltip, yuk ikuti tutorial dibawah ini hingga selesai.

Cara Membuat dan Menggunakan Tooltip Hanya Dengan CSS
  1. Pertama, login dulu ke Blogger,
  2. Kemudian, pada dashboard Blogger pilih TemaEdit HTML,
  3. Lalu, copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau diatas </style>,
    /* Tooltip With CSS By Anirocksite */
    [data-tooltip] {
      position: relative;
      z-index: 2;
      cursor: pointer;
    }
    [data-tooltip]:before,
    [data-tooltip]:after {
      visibility: hidden;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      pointer-events: none;
    }
    [data-tooltip]:before {
      position: absolute;
      bottom: 150%;
      left: 50%;
      margin-bottom: 5px;
      margin-left: -80px;
      padding: 7px;
      width: 160px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      background-color: #000;
      background-color: hsla(0, 0%, 20%, 0.9);
      color: #fff;
      content: attr(data-tooltip);
      text-align: center;
      font-size: 14px;
      line-height: 1.2;
    }
    [data-tooltip]:after {
      position: absolute;
      bottom: 150%;
      left: 50%;
      margin-left: -5px;
      width: 0;
      border-top: 5px solid #000;
      border-top: 5px solid hsla(0, 0%, 20%, 0.9);
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      content: " ";
      font-size: 0;
      line-height: 0;
    }
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
      visibility: visible;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
      opacity: 1;
    }
    
  4. Untuk cara menggunakan Tooltip gunakan perintah ini,data-tooltip='ISI DISINI',
    <!-- CONTOH PENGGUNAAN TOOLTIP -->
    <span data-tooltip='Anirock Site'>AnirockSite</span>
    Maka hasilnya akan seperti berikut ini (untuk melihat hasilnya cukup arahkan cursor), Anirock Site
Bagaimana menarik bukan ? dan jika kamu masih bertanya apa perbedaannya menggunakan title dan tooltip,   cukup arahkan cursor kamu ke Title dan Tooltip untuk melihat hasilnya. title  ~ | ~   Tooltip

Kamu dapat menerapkan Tooltip itu dimana saja, misalkan kamu menggunakannya di Navigasi menu web kamu, Label, atau item lainnya yang ada diweb kamu, sekian tutorial yang dapat saya bagikan, jika ada kekurangan pada Tooltip yang saya bagikan kamu kembangkan saja,  bagaimana sangat sederhana dan mudah bukan ?

Semoga Bermanfaat :D

Seseorang yang membenci kerumitan namun nekat mempelajari kerumitan tersebut jika dirasa menarik.
Facebook Instagram Twitter
Show Comments!
Hide comments

2 Responses to "Cara Membuat dan Menggunakan ToolTip (CSS)"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Mantap mas. Terima kasih sudah di share. Kalau boleh tau cara bikin loading gambar seperti blog ini gimana ya mas? Keren banget.. unik..

    ReplyDelete
    Replies
    1. Ada kok tutornya, cek aja di Menu Blogger

      Semua gambar yang ada diblog akan kena Lazyload, semoga bermanfaat :D

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With