Tooltip

Tooltip Component

The Tooltip component wraps any content and shows a small informational popup when the user hovers or focuses on the element. It's useful for providing additional context or explanations without cluttering the interface.

Example Usage

<x-tooltip tooltip="More information" position="right">
    <p class="text-black dark:text-white">Hover me</p>
</x-tooltip>

Props

• tooltip (string|null)
  The text displayed inside the tooltip.

• position (string, default: "top")
  Determines where the tooltip appears relative to the content. Options: top, bottom, left, right.

Overview

This Tooltip component enhances user interaction by providing context-sensitive messages on hover or focus. It uses Tailwind for styling and supports all standard placement directions. The tooltip is styled for both light and dark modes.