Tooltip
Tooltip component.
Tooltip, Customization Blocks
<x-tooltip text="TallStackUI" />
The v4 dropped the dependency of the Tippy.js in order to reduce the
bundle size.
<!-- 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" /><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" icon="shield-check" /><x-tooltip text="XS" xs/><x-tooltip text="SM" sm/><x-tooltip text="MD" md/><x-tooltip text="LG" lg/><x-tooltip> <b>Tall</b><i>Stack</i><u>Ui</u></x-tooltip><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="mauve" color="mauve" /><x-tooltip text="olive" color="olive" /><x-tooltip text="mist" color="mist" /><x-tooltip text="taupe" color="taupe" /><x-tooltip text="black" color="black" />
#
Delay
NEW
An option to control the default delay of the tooltip.
<!-- Accepted: slow (400ms), fast (150ms), faster (75ms), flash (0) --><x-tooltip text="TallStackUI" delay="flash" /><x-button tooltip="TallStackUI" data-tooltip-delay="slow" /><span x-data x-tooltip="TallStackUI" data-tooltip-delay="faster"></span>
#
Balloon Color
NEW
An option to change the color of the tooltip Balloon
<!-- color paints the icon, balloon paints the balloon --><x-tooltip text="TallStackUI" balloon="red" /><x-button tooltip="TallStackUI" data-tooltip-color="emerald" /><x-kbd tooltip="TallStackUI" data-tooltip-color="amber" />
A colored balloon keeps its color in both themes, and so does the
default one. You can ppt into a light balloon on a dark theme
through the
invert
setting in the
configuration file.
#
Balloon Scale
NEW
<!-- Accepted: sm (default), md, lg --><x-tooltip text="TallStackUI" scale="lg" /><x-button tooltip="TallStackUI" data-tooltip-size="lg" /><span x-data x-tooltip="TallStackUI" data-tooltip-size="md"></span>The balloon wraps at that maximum and then shrinks to its widest line, so a two-line hint does not sit in a box with empty space on its right.
#
Disabled
NEW
<div x-data="{ disabled: false }"> <x-toggle x-model="disabled" label="Disable the tooltip" /> <span x-data x-tooltip="TallStackUI" x-bind:data-tooltip-disabled="disabled"> Hover me </span></div>The balloon is created by JavaScript and shared by anchors that have no component behind them.
/*The balloon is built by JavaScript and shared by every anchor,so it is styled through a stable selector instead of customize()*/ [data-tsui-tooltip] { border-radius: 0; }[data-tsui-tooltip] > [data-arrow] { display: none; }