Tooltip

Tooltip component.

Tooltip, Personalization Blocks

Example:

TallStackUi::personalize()
    ->tooltip()
    ->block('block', 'classes');

# Basic Usage

<x-tooltip text="TallStackUI" />

# Available Positions

You can use all the tippy.js available placements.

<!-- Available Positions:
     bottom,
     bottom-start,
     bottom-end,
     top,
     top-start,
     top-end,
     left,
     left-start,
     left-end,
     right,
     right-start,
     right-end,
     auto
     auto-start
     auto-end
 -->
 
<x-tooltip text="Top" position="top" />
<x-tooltip text="Bottom" position="bottom" />
<x-tooltip text="Left" position="left" />
<x-tooltip text="Right" position="right" />

# Customized Icon

<x-tooltip text="Top" position="top" icon="exclamation-circle" />
<x-tooltip text="Bottom" position="bottom" icon="exclamation-triangle" />
<x-tooltip text="Left" position="left" icon="shield-exclamation" />
<x-tooltip text="Right" position="right" />

# Size Variations

<x-tooltip text="XS" xs/>
<x-tooltip text="SM" sm/>
<x-tooltip text="MD" md/>
<x-tooltip text="LG" lg/>

# HTML Content

<x-tooltip>
    <b>Tall</b><i>Stack</i><u>Ui</u>
</x-tooltip>

# Color Variations

<x-tooltip text="primary" />
<x-tooltip text="secondary" color="secondary" />
<x-tooltip text="slate" color="slate" />
<x-tooltip text="gray" color="gray" />
<x-tooltip text="zinc" color="zinc" />
<x-tooltip text="neutral" color="neutral" />
<x-tooltip text="stone" color="stone" />
<x-tooltip text="red" color="red" />
<x-tooltip text="orange" color="orange" />
<x-tooltip text="amber" color="amber" />
<x-tooltip text="yellow" color="yellow" />
<x-tooltip text="lime" color="lime" />
<x-tooltip text="green" color="green" />
<x-tooltip text="emerald" color="emerald" />
<x-tooltip text="teal" color="teal" />
<x-tooltip text="cyan" color="cyan" />
<x-tooltip text="sky" color="sky" />
<x-tooltip text="blue" color="blue" />
<x-tooltip text="indigo" color="indigo" />
<x-tooltip text="violet" color="violet" />
<x-tooltip text="purple" color="purple" />
<x-tooltip text="fuchsia" color="fuchsia" />
<x-tooltip text="pink" color="pink" />
<x-tooltip text="rose" color="rose" />
<x-tooltip text="black" color="black" />

# Variations

The concept of variation follows the same patterns as icon variations.