Tooltip

<x-tooltip text="Hi from tooltip">
    <x-button appearance="base-200" color="neutral">Hover me</x-button>
</x-tooltip>

<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">Hover me</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-base-100 border-base-300"></div>Hi from tooltip
    </div>
</div>

<x-tooltip text="Shown above" position="top">
    <x-button size="sm" appearance="base-200" color="neutral">top</x-button>
</x-tooltip>
<x-tooltip text="Shown on the right" position="right">
    <x-button size="sm" appearance="base-200" color="neutral">right</x-button>
</x-tooltip>
<x-tooltip text="Shown below" position="bottom">
    <x-button size="sm" appearance="base-200" color="neutral">bottom</x-button>
</x-tooltip>
<x-tooltip text="Shown on the left" position="left">
    <x-button size="sm" appearance="base-200" color="neutral">left</x-button>
</x-tooltip>

<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">top</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-base-100 border-base-300"></div>Shown above
    </div>
</div>
<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">right</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border left-full top-1/2 -translate-y-1/2 ml-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 border-l border-b bg-base-100 border-base-300"></div>Shown on the right
    </div>
</div>
<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">bottom</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border top-full left-1/2 -translate-x-1/2 mt-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 border-l border-t bg-base-100 border-base-300"></div>Shown below
    </div>
</div>
<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">left</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border right-full top-1/2 -translate-y-1/2 mr-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 right-0 top-1/2 translate-x-1/2 -translate-y-1/2 border-r border-t bg-base-100 border-base-300"></div>Shown on the left
    </div>
</div>

<x-tooltip text="base-100 (hairline ring)" color="base-100" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">base-100</x-button>
</x-tooltip>
<x-tooltip text="base-200 (= default)" color="base-200" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">base-200</x-button>
</x-tooltip>
<x-tooltip text="base-300 (more contrast)" color="base-300" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">base-300</x-button>
</x-tooltip>

<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">base-100</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-base-100 border-base-300"></div>base-100 (hairline ring)
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">base-200</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-base-200 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-base-200 border-base-300"></div>base-200 (= default)
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">base-300</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-base-300 text-base-content border-base-content/20">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-base-300 border-base-content/20"></div>base-300 (more contrast)
    </div>
</div>

<x-tooltip text="default (light)" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">default</x-button>
</x-tooltip>
<x-tooltip text="neutral" color="neutral" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">neutral</x-button>
</x-tooltip>
<x-tooltip text="primary" color="primary" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">primary</x-button>
</x-tooltip>
<x-tooltip text="secondary" color="secondary" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">secondary</x-button>
</x-tooltip>
<x-tooltip text="accent" color="accent" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">accent</x-button>
</x-tooltip>
<x-tooltip text="info" color="info" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">info</x-button>
</x-tooltip>
<x-tooltip text="success" color="success" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">success</x-button>
</x-tooltip>
<x-tooltip text="warning" color="warning" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">warning</x-button>
</x-tooltip>
<x-tooltip text="error" color="error" :open="true">
    <x-button size="sm" appearance="base-200" color="neutral">error</x-button>
</x-tooltip>

<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">default</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-base-100 border-base-300"></div>default (light)
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">neutral</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-neutral text-neutral-content border-neutral">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-neutral border-neutral"></div>neutral
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">primary</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-primary text-primary-content border-primary">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-primary border-primary"></div>primary
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">secondary</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-secondary text-secondary-content border-secondary">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-secondary border-secondary"></div>secondary
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">accent</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-accent text-accent-content border-accent">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-accent border-accent"></div>accent
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">info</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-info text-info-content border-info">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-info border-info"></div>info
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">success</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-success text-success-content border-success">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-success border-success"></div>success
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">warning</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-warning text-warning-content border-warning">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-warning border-warning"></div>warning
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">error</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-error text-error-content border-error">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-error border-error"></div>error
    </div>
</div>

<x-tooltip text="Appears on hover">
    <x-button appearance="base-200" color="neutral">open=false (default)</x-button>
</x-tooltip>
<x-tooltip text="Always shown" :open="true" color="primary">
    <x-button appearance="base-200" color="neutral">open=true</x-button>
</x-tooltip>

<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">open=false (default)</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-base-100 border-base-300"></div>Appears on hover
    </div>
</div>
<div x-data="{ open: true }" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-base-200 text-base-content border-base-content/10 hover:bg-base-300 focus-visible:ring-base-content cursor-pointer">open=true</button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-primary text-primary-content border-primary">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-primary border-primary"></div>Always shown
    </div>
</div>

<x-tooltip text="Close" position="top">
    <button class="inline-flex items-center justify-center w-8 h-8 rounded-full text-base-content hover:bg-base-200 transition-colors cursor-pointer" aria-label="close">
        <x-i type="close-circle" variant="linear" class="w-5 h-5" />
    </button>
</x-tooltip>
<x-tooltip text="Add to favourites" position="top" color="warning">
    <button class="inline-flex items-center justify-center w-8 h-8 rounded-full text-base-content hover:bg-base-200 transition-colors cursor-pointer" aria-label="favorite">
        <x-i type="star" variant="linear" class="w-5 h-5" />
    </button>
</x-tooltip>
<x-tooltip text="Check notifications" position="top" color="info">
    <button class="inline-flex items-center justify-center w-8 h-8 rounded-full text-base-content hover:bg-base-200 transition-colors cursor-pointer" aria-label="notifications">
        <x-i type="bell" variant="linear" class="w-5 h-5" />
    </button>
</x-tooltip>

<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center w-8 h-8 rounded-full text-base-content hover:bg-base-200 transition-colors cursor-pointer" aria-label="close"><svg class="w-5 h-5" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" d="m14.5 9.5l-5 5m0-5l5 5"></path>
</g></svg></button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-base-100 border-base-300"></div>Close
    </div>
</div>
<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center w-8 h-8 rounded-full text-base-content hover:bg-base-200 transition-colors cursor-pointer" aria-label="favorite"><svg class="w-5 h-5" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-width="1.5" d="M9.153 5.408C10.42 3.136 11.053 2 12 2s1.58 1.136 2.847 3.408l.328.588c.36.646.54.969.82 1.182s.63.292 1.33.45l.636.144c2.46.557 3.689.835 3.982 1.776c.292.94-.546 1.921-2.223 3.882l-.434.507c-.476.557-.715.836-.822 1.18c-.107.345-.071.717.001 1.46l.066.677c.253 2.617.38 3.925-.386 4.506s-1.918.051-4.22-1.009l-.597-.274c-.654-.302-.981-.452-1.328-.452s-.674.15-1.328.452l-.596.274c-2.303 1.06-3.455 1.59-4.22 1.01c-.767-.582-.64-1.89-.387-4.507l.066-.676c.072-.744.108-1.116 0-1.46c-.106-.345-.345-.624-.821-1.18l-.434-.508c-1.677-1.96-2.515-2.941-2.223-3.882S3.58 8.328 6.04 7.772l.636-.144c.699-.158 1.048-.237 1.329-.45s.46-.536.82-1.182z"></path></svg></button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-warning text-warning-content border-warning">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-warning border-warning"></div>Add to favourites
    </div>
</div>
<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<button class="inline-flex items-center justify-center w-8 h-8 rounded-full text-base-content hover:bg-base-200 transition-colors cursor-pointer" aria-label="notifications"><svg class="w-5 h-5" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M18.75 9.71v-.705C18.75 5.136 15.726 2 12 2S5.25 5.136 5.25 9.005v.705a4.4 4.4 0 0 1-.692 2.375L3.45 13.81c-1.011 1.575-.239 3.716 1.52 4.214a25.8 25.8 0 0 0 14.06 0c1.759-.498 2.531-2.639 1.52-4.213l-1.108-1.725a4.4 4.4 0 0 1-.693-2.375Z"></path>
<path stroke-linecap="round" d="M7.5 19c.655 1.748 2.422 3 4.5 3s3.845-1.252 4.5-3"></path>
</g></svg></button>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border bottom-full left-1/2 -translate-x-1/2 mb-2 bg-info text-info-content border-info">
<div class="absolute w-2 h-2 rotate-45 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 border-r border-b bg-info border-info"></div>Check notifications
    </div>
</div>

<div class="flex items-center gap-4">
    <span class="text-sm text-base-content/70 w-40">Why is it disabled?</span>
    <x-tooltip text="Fill in every required field first" position="right" color="error">
        <span class="inline-block">
            <x-button size="sm" disabled>Save</x-button>
        </span>
    </x-tooltip>
</div>
<div class="flex items-start gap-4">
    <span class="text-sm text-base-content/70 w-40 pt-2">Form field helper</span>
    <div class="flex-1 max-w-xs">
        <label class="flex items-center gap-1.5 text-sm font-medium mb-1">
            API token
            <x-tooltip text="Issued under Settings → Developer" position="right" color="info">
                <span class="inline-flex items-center justify-center w-4 h-4 rounded-full text-base-content/50 cursor-help">
                    <x-i type="info-circle" variant="linear" class="w-4 h-4" />
                </span>
            </x-tooltip>
        </label>
        <x-input size="sm" placeholder="sk-..." />
    </div>
</div>
<div class="flex items-center gap-4">
    <span class="text-sm text-base-content/70 w-40">Truncated text</span>
    <x-tooltip text="The full message is revealed on hover, however long it is." position="bottom">
        <span class="inline-block max-w-[16rem] truncate align-middle text-sm border-b border-dashed border-base-content/40 cursor-help">
            The full message is revealed on hover, however long it is.
        </span>
    </x-tooltip>
</div>

<div class="flex items-center gap-4">
<span class="text-sm text-base-content/70 w-40">Why is it disabled?</span>
<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<span class="inline-block"><button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)] gap-1.5 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary opacity-50 cursor-not-allowed pointer-events-none" disabled="disabled">Save</button></span>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border left-full top-1/2 -translate-y-1/2 ml-2 bg-error text-error-content border-error">
<div class="absolute w-2 h-2 rotate-45 left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 border-l border-b bg-error border-error"></div>Fill in every required field first
        </div>
</div>
</div>
<div class="flex items-start gap-4">
<span class="text-sm text-base-content/70 w-40 pt-2">Form field helper</span>
<div class="flex-1 max-w-xs">
<label class="flex items-center gap-1.5 text-sm font-medium mb-1">API token</label>
<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<label class="flex items-center gap-1.5 text-sm font-medium mb-1"><span class="inline-flex items-center justify-center w-4 h-4 rounded-full text-base-content/50 cursor-help"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"></path>
<circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"></circle>
</g></svg></span></label>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border left-full top-1/2 -translate-y-1/2 ml-2 bg-info text-info-content border-info">
<label class="flex items-center gap-1.5 text-sm font-medium mb-1"></label>
<div class="absolute w-2 h-2 rotate-45 left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 border-l border-b bg-info border-info">
<label class="flex items-center gap-1.5 text-sm font-medium mb-1"></label>
</div><label class="flex items-center gap-1.5 text-sm font-medium mb-1">Issued under Settings → Developer</label>
</div><label class="flex items-center gap-1.5 text-sm font-medium mb-1"></label>
</div>
<div class="w-full">
<div class="flex items-stretch transition-colors rounded-[var(--radius-field)] bg-base-100 tune-border border-base-300 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary h-[var(--h-field-sm)]">
<div class="relative flex-1 min-w-0 flex items-stretch">
<input type="text" id="input_6a7e9b5db0c05" class="flex-1 min-w-0 w-full bg-transparent border-0 outline-none placeholder:text-base-content/40 peer text-[length:var(--text-field-sm)] px-[var(--px-input-sm)]" placeholder="sk-...">
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<span class="text-sm text-base-content/70 w-40">Truncated text</span>
<div x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false" class="relative inline-block w-fit">
<span class="inline-block max-w-[16rem] truncate align-middle text-sm border-b border-dashed border-base-content/40 cursor-help">The full message is revealed on hover, however long it is.</span>
<div x-show="open" x-cloak="" role="tooltip" x-transition.opacity.duration.100ms="" class="absolute z-50 pointer-events-none whitespace-nowrap max-w-xs px-2 py-1 text-xs rounded-[var(--radius-field)] tune-border top-full left-1/2 -translate-x-1/2 mt-2 bg-base-100 text-base-content border-base-300">
<div class="absolute w-2 h-2 rotate-45 top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 border-l border-t bg-base-100 border-base-300"></div>The full message is revealed on hover, however long it is.
        </div>
</div>
</div>