Membuat Tooltip dengan CSS - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Membuat Tooltip dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Web Design, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Tooltip dengan CSS
link : Membuat Tooltip dengan CSS

Membuat Tooltip dengan CSS

Membuat Tooltip dengan CSS - Tooltip adalah sebuah menu text kecil dan sederhana yang muncul ketika pointer mouse diletakkan (hover) pada sebuah objek, seperti button, form atau link. Bertujuan untuk memberi petunjuk bagi pengunjung untuk melakukan action.

Yeyey, pada kesempatan kali ini Juragan akan bahas bagaimana cara membuatnya.

HTML

<h1>CSS Tooltip</h1>
<div class="tooltip">
<p><a href="#" data-tooltip="I’m the tooltip text.">Belajar Membuat Tooltip</a></p>
</div>

CSS

a:hover {
  text-decoration: none;
}

header,
.tooltip,
.tooltip p {
  margin: 4em 0;
  text-align: center;
}

[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;
  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;
}

mudah kan, semoga bermanfaat yah .. see you

Demikianlah Artikel Membuat Tooltip dengan CSS

Sekianlah artikel Membuat Tooltip dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Tooltip dengan CSS dengan alamat link http://jendeladuniainternet.blogspot.com/2015/12/membuat-tooltip-dengan-css.html

Tweet