Phenix Storybook

Tooltip

Enhanced title for buttons, displayed as instant tooltips.

Read more Read less

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 Value
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="Grille des programmes"/>
tip :slot

Content of the tooltip

 
<:tip>
  <div class="grid grid-cols-2">
    <div>07h00 - 09h00</div>
    <div>Les matins</div>
    <div>09h00 - 10h00</div>
    <div>Le cours de l'histoire</div>
  </div>
</:tip>