側邊提示工具提示
#tooltip-003-SideHint
<!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-2.5 rounded-md border dark:bg-black dark:text-white dark:border-white cursor-pointer relative;
}
.tooltip {
@apply bg-amber-500 absolute top-0 left-[calc(100%+20px)] w-max h-full text-white px-5 py-1 rounded-md flex items-center before:absolute before:top-1/2 before:-translate-y-1/2 before:-left-1 before:w-2 before:h-2 before:rotate-45 before:bg-amber-500 before:-z-0 scale-0 opacity-0 transition-all duration-300 pointer-events-none select-none;
}
.btn:hover .tooltip {
@apply scale-100 opacity-100;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<button class="group btn">
Hover Me
<div class="tooltip">
Ta-da!
</div>
</button>
</body>
</html>