CSS ToolTips
ToolTip adalah informasi yang tampil ketika Anda berada di atas (hover) sebuah text atau gambar di halaman web.
Misalnya ketika mouse Anda arahkan pada text “Information” pada gambar di atas maka akan muncul kotak informasi yang isinya bisa Anda tentukan sendiri.
Pada HTML Anda dapat membuat ToolTip dengan menggunakan atribut “title”, seperti:
<p><abbr title="Cascading Style Sheet">CSS</abbr> mengendalikan tampilan halaman web.</p>
Untuk membuat tooltip terlihat lebih menarik, Anda bisa menggunakan CSS pada elemen div HTML.
Berikut ini coding HTML dan CSSnya:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ToolTips Example</title>
<style type="text/css">
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #f0f0f0; border: 1px solid #e0e0e0; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #00ff00; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
</style>
</head>
<body>
<h1>Membuat ToolTips dengan CSS</h1>
<p> Contoh tooltips jenis <a class="tooltip" href="#">Classic
<span class="custom classic">
<em>Classic</em>
Ini adalah contoh CSS tooltip jenis Classic,<br/> Silakah Anda coba buat sendiri!</span>
</a>
</p>
<p> Contoh tooltips jenis <a class="tooltip" href="#">Warning
<span class="custom warning">
<img src="Warning.png" alt="Information" height="48" width="48" />
<em>Warning</em>
Ini adalah contoh CSS tooltip jenis Warning,<br/> Silakah Anda coba buat sendiri!</span>
</a>
</p>
<p> Contoh tooltips jenis <a class="tooltip" href="#">Critical
<span class="custom critical">
<img src="Critical.png" alt="Help" height="48" width="48" />
<em>Critical</em>
Ini adalah contoh CSS tooltip jenis Critical,<br/> Silakah Anda coba buat sendiri!</span>
</a>
</p>
<p> Contoh tooltips jenis <a class="tooltip" href="#">Help
<span class="custom help">
<img src="Help.png" alt="Help" height="48" width="48" />
<em>Help</em>
Ini adalah contoh CSS tooltip jenis Help,<br/> Silakah Anda coba buat sendiri!</span>
</a>
</p>
<p> Contoh tooltips jenis <a class="tooltip" href="#">Information
<span class="custom info">
<img src="Info.png" alt="Information" height="48" width="48" />
<em>Information</em>
Ini adalah contoh CSS tooltip jenis Information,<br/> Silakah Anda coba buat sendiri!</span>
</a>
</p>
</body>
</html>
Selamat mencoba.
Nb. Gambar icon untuk tooltips Anda siapkan terlebih dahulu.