Phenix Storybook

Tooltip

Enhanced title for buttons, displayed as instant tooltips.

Note that inner block SHOULD be an element, not text:

This won't show the tooltip:

<.tooltip>
  age?
  <:tip>42</:tip>
</.tooltip>

And this will.

<.tooltip>
  <span>age?</span>
  <:tip>42</:tip>
</.tooltip>

Finally, placement is computed, so it will differ when using a <span> or a <div>.

Attribute	Type	Documentation	Default
tooltip_class	:string	The tooltip classes that you can overwrite.
arrow_class	:string	The classes responsible for the arrow that you can overwrite.
arrow	:boolean	Boolean to show the arrow in the tooltip.	true
class	:string	The classes responsible for the container.
placement	:string	The placement of the tooltip relative to the container. You can also append 'start' and 'end' like 'right-end' or 'top-start'.	"right"
inner_block	:slot	The component that wears the tooltip
<.button outline={true} text="Search" icon="fa fa-magnifying-glass"/>
tip	:slot	Content of the tooltip
<:tip>You can search for a little more information.</:tip>