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 https://jendeladuniainternet.blogspot.com/2015/12/membuat-tooltip-dengan-css.html
0 Response to "Membuat Tooltip dengan CSS"
Posting Komentar