بنية Tooltip ·

    <.tooltip class="tooltip" show_arrow={false}>
  <:trigger>Hover me</:trigger>
  <:content>Tooltip content</:content>
</.tooltip>

  

    <.tooltip class="tooltip">
  <:trigger>Hover me</:trigger>
  <:content>Tooltip content</:content>
</.tooltip>

  

    <.tooltip class="tooltip" positioning={%Corex.Positioning{placement: "bottom"}}>
  <:trigger>Bottom</:trigger>
  <:content>Tooltip below</:content>
</.tooltip>

  

    <div class="layout__row flex-wrap gap-2">
  <.tooltip class="tooltip" positioning={%Corex.Positioning{placement: "top", gutter: 4}}>
    <:trigger>Gutter 4</:trigger>
    <:content>Tight gap between trigger and tooltip</:content>
  </.tooltip>
  <.tooltip class="tooltip" positioning={%Corex.Positioning{placement: "top", gutter: 32}}>
    <:trigger>Gutter 32</:trigger>
    <:content>Wide gap between trigger and tooltip</:content>
  </.tooltip>
  <.tooltip class="tooltip" positioning={%Corex.Positioning{placement: "top", shift: 0}}>
    <:trigger>Shift 0</:trigger>
    <:content>Centered along the placement edge</:content>
  </.tooltip>
  <.tooltip class="tooltip" positioning={%Corex.Positioning{placement: "top", shift: 32}}>
    <:trigger>Shift 32</:trigger>
    <:content>Tooltip slid along the edge</:content>
  </.tooltip>
</div>