Phenix Storybook

Pick a theme

Displays Riders

Tooltip

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="See campaigns"/>
tip :slot Content of the tooltip 
<:tip>
  <ul class="flex flex-col space-y-2">
    <a href="https://tinyurl.com/8tf6n6sk" class="whitespace-nowrap hover:text-gray-500" target="_blank"><i class="fa-thin fa-arrow-right-from-bracket mr-2"/> Coupe du monde de Rugby - Paris - 231028</a>
    <a href="https://tinyurl.com/8tf6n6sk" class="whitespace-nowrap hover:text-gray-500" target="_blank"><i class="fa-thin fa-arrow-right-from-bracket mr-2"/> Boursorama - Province - 230708</a>
    <a href="https://tinyurl.com/8tf6n6sk" class="whitespace-nowrap hover:text-gray-500" target="_blank"><i class="fa-thin fa-arrow-right-from-bracket mr-2"/> Repeat - Foire de Paris - 234899</a>
  </ul>
</:tip>