Belajar CSS (24. Tooltip)

Tooltip digunakan untuk menambahkan informasi pada suatu element saat kita arahkan kursor ke element tersebut.
Berikut adalah cara penulisan kode tooltip.

<!DOCTYPE html>
<html>
<head>
	<title>belajar tooltip</title>
	<style>
		.tooltip {
			position: relative;
			display: inline-block;
		}	
		.tooltip .tooltiptext {
			visibility: hidden;
			width: 100px;
			background-color: blue;
			color: #fff;
			text-align: center;
			border-radius: 10px;
			padding: 5px 0;

			position: absolute;
			z-index: 1;
		}
		.tooltip:hover .tooltiptext {
			visibility: visible;
		}
	</style>
</head>
<body>
	<div class="tooltip">Coba arahkan kursor kesini
		<span class="tooltiptext">Ini adalah text tooltip</span>
	</div>
</body>
</html>

hasil

Letak tooltip di kanan

<!DOCTYPE html>
<html>
<head>
	<title>belajar tooltip</title>
	<style>
		.tooltip {
			position: relative;
			display: inline-block;
		}	
		.tooltip .tooltiptext {
			visibility: hidden;
			width: 100px;
			background-color: blue;
			color: #fff;
			text-align: center;
			border-radius: 10px;
			padding: 5px 0;

			position: absolute;
			z-index: 1;
			top: -5px;
			left: 105%;
		}
		.tooltip:hover .tooltiptext {
			visibility: visible;
		}
	</style>
</head>
<body>
	<div class="tooltip">Coba arahkan kursor kesini
		<span class="tooltiptext">Ini adalah text tooltip</span>
	</div>
</body>
</html>

hasil

Letak tooltip dikiri

<!DOCTYPE html>
<html>
<head>
	<title>belajar tooltip</title>
	<style>
		.tooltip {
			position: relative;
			display: inline-block;
		}	
		.tooltip .tooltiptext {
			visibility: hidden;
			width: 100px;
			background-color: blue;
			color: #fff;
			text-align: center;
			border-radius: 10px;
			padding: 5px 0;

			position: absolute;
			z-index: 1;
			top: -5px;
			right: 105%;
		}
		.tooltip:hover .tooltiptext {
			visibility: visible;
		}
	</style>
</head>
<body>
	<div class="tooltip">Coba arahkan kursor kesini
		<span class="tooltiptext">Ini adalah text tooltip</span>
	</div>
</body>
</html>

hasil

letak tooltip diatas

<!DOCTYPE html>
<html>
<head>
	<title>belajar tooltip</title>
	<style>
		.tooltip {
			position: relative;
			display: inline-block;
		}	
		.tooltip .tooltiptext {
			visibility: hidden;
			width: 100px;
			background-color: blue;
			color: #fff;
			text-align: center;
			border-radius: 10px;
			padding: 5px 0;

			position: absolute;
			z-index: 1;
			bottom: 100%;
    		left: 50%;
    		margin-left: -50px;
		}
		.tooltip:hover .tooltiptext {
			visibility: visible;
		}
	</style>
</head>
<body>
	<div class="tooltip">Coba arahkan kursor kesini
		<span class="tooltiptext">Ini adalah text tooltip</span>
	</div>
</body>
</html>

hasil

letak tooltip dibawah

<!DOCTYPE html>
<html>
<head>
	<title>belajar tooltip</title>
	<style>
		.tooltip {
			position: relative;
			display: inline-block;
		}	
		.tooltip .tooltiptext {
			visibility: hidden;
			width: 100px;
			background-color: blue;
			color: #fff;
			text-align: center;
			border-radius: 10px;
			padding: 5px 0;

			position: absolute;
			z-index: 1;
			top: 100%;
    		left: 50%;
    		margin-left: -50px;
		}
		.tooltip:hover .tooltiptext {
			visibility: visible;
		}
	</style>
</head>
<body>
	<div class="tooltip">Coba arahkan kursor kesini
		<span class="tooltiptext">Ini adalah text tooltip</span>
	</div>
</body>
</html>

hasil

Agar terlihat lebih cantik tooltipnya, kita tambahkan arrow. contoh bottom arrow :

<!DOCTYPE html>
<html>
	<head>
		<style>
			.tooltip {
			    position: relative;
			    display: inline-block;
			    border-bottom: 1px dotted black;
			}

			.tooltip .tooltiptext {
			    visibility: hidden;
			    width: 120px;
			    background-color: black;
			    color: #fff;
			    text-align: center;
			    border-radius: 6px;
			    padding: 5px 0;
			    position: absolute;
			    z-index: 1;
			    bottom: 150%;
			    left: 50%;
			    margin-left: -60px;
			}

			.tooltip .tooltiptext::after {
			    content: "";
			    position: absolute;
			    top: 100%;
			    left: 50%;
			    margin-left: -5px;
			    border-width: 5px;
			    border-style: solid;
			    border-color: black transparent transparent transparent;
			}

			.tooltip:hover .tooltiptext {
			    visibility: visible;
			}
		</style>
	</head>
	<body style="text-align:center;">
		<h2>Top Tooltip w/ Bottom Arrow</h2>
		<div class="tooltip">Hover over me
		  <span class="tooltiptext">Tooltip text</span>
		</div>

	</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

written by @akhi_syabab