Capsule Tooltip
#tooltip-005-CapsuleTooltip
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<style type="text/tailwindcss">
.btn {
@apply px-5 py-3 bg-amber-500 text-white cursor-pointer relative rounded-full;
}
.tooltip {
@apply absolute bottom-full left-1/2 translate-y-3 w-max opacity-0 transition-all duration-300 pointer-events-none select-none;
}
.btn:hover .tooltip {
@apply opacity-100 -translate-y-1;
}
.title {
@apply px-2 py-1 text-white bg-slate-800 rounded-tl-md rounded-r-md;
}
.tooltip-triangle {
@apply w-0 h-0 border-t-8 border-r-8 border-t-slate-800 border-r-transparent;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<button class="group btn">
<p>tooltip</p>
<div class="tooltip">
<p class="title">Hello there!</p>
<div class="tooltip-triangle"></div>
</div>
</button>
</body>
</html>