Fluxtor

#Introduction

The Tooltip component is a lightweight, accessible overlay component that provides contextual information or helpful hints when users interact with elements. It offers flexible positioning, multiple trigger variants, and seamless dark mode support.

#Installation

Use the fluxtor artisan command to install the tooltip component easily:

php artisan fluxtor:install tooltip

Once installed, you can use the <x-ui.tooltip /> and <x-ui.tooltip.content /> components in any Blade view.

#Usage

#Basic Tooltip

<x-ui.tooltip>
    <x-slot:trigger>
        <button>Hover me</button>
    </x-slot:trigger>
    <x-ui.tooltip.content>
        This is a helpful tooltip message
    </x-ui.tooltip.content>
</x-ui.tooltip>

#Icon with Tooltip

Perfect for adding contextual help to form fields, headings, or interface elements.

<h3 class="text-lg font-semibold flex items-center gap-x-2">
    Tax identification number
    <x-ui.tooltip placement="right" variant="button">
        <x-slot:trigger>
            <x-ui.icon name="information-circle" class="h-5 w-5 text-gray-500" />
        </x-slot:trigger>
        <x-ui.tooltip.content>
            Enter your federal tax ID or SSN for tax reporting purposes
        </x-ui.tooltip.content>
    </x-ui.tooltip>
</h3>

#Different Placements

The tooltip can be positioned in four directions relative to the trigger element.

<!-- Top placement -->
<x-ui.tooltip placement="top">
    <x-slot:trigger>
        <button><x-ui.icon name="cog-6-tooth" /></button>
    </x-slot:trigger>
    <x-ui.tooltip.content>Settings</x-ui.tooltip.content>
</x-ui.tooltip>

<!-- Right placement -->
<x-ui.tooltip placement="right">
    <x-slot:trigger>
        <button><x-ui.icon name="cog-6-tooth" /></button>
    </x-slot:trigger>
    <x-ui.tooltip.content>Settings</x-ui.tooltip.content>
</x-ui.tooltip>

<!-- Bottom placement -->
<x-ui.tooltip placement="bottom">
    <x-slot:trigger>
        <button><x-ui.icon name="cog-6-tooth" /></button>
    </x-slot:trigger>
    <x-ui.tooltip.content>Settings</x-ui.tooltip.content>
</x-ui.tooltip>

<!-- Left placement -->
<x-ui.tooltip placement="left">
    <x-slot:trigger>
        <button><x-ui.icon name="cog-6-tooth" /></button>
    </x-slot:trigger>
    <x-ui.tooltip.content>Settings</x-ui.tooltip.content>
</x-ui.tooltip>

#Button Variant

Use the button variant when you want the tooltip to appear on click instead of hover. This is particularly useful for touch devices or when you need more deliberate interaction.

<x-ui.tooltip variant="button" placement="top">
    <x-slot:trigger>
        <x-ui.icon name="question-mark-circle" class="h-6 w-6 text-blue-500 cursor-pointer" />
    </x-slot:trigger>
    <x-ui.tooltip.content>
        Click the icon to see this tooltip
    </x-ui.tooltip.content>
</x-ui.tooltip>

#Custom Styling

You can customize the tooltip content appearance by passing additional classes to the content component.

<x-ui.tooltip placement="top">
    <x-slot:trigger>
        <button>Custom tooltip</button>
    </x-slot:trigger>
    <x-ui.tooltip.content class="bg-purple-600 text-white border border-purple-500">
        This tooltip has custom styling
    </x-ui.tooltip.content>
</x-ui.tooltip>

#Component Props Reference

#Tooltip Props

#Tooltip Content Props

#Inherited Props

The tooltip content component automatically inherits the placement prop from its parent tooltip component, ensuring proper positioning.