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:

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

And this will.

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

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

<.tip >
  <.button text="Add new" icon="fa fa-plus"></.button>
  <:tip>This could take a while.</:tip>
</.tip>
<.tip
  arrow_class="!bg-* bg-gray-500"
  tooltip_class="!bg-* bg-gray-500 whitespace-normal"
>
  <.button outline={true} text="Search" icon="fa fa-magnifying-glass"/>
  <:tip>You can search for a little more information.</:tip>
</.tip>
<.tip
  arrow_class="!bg-* bg-gray-50"
  placement="right"
  tooltip_class="!bg-* bg-gray-50 text-gray-700 text-sm whitespace-normal px-8 py-4"
>
  <.button outline={true} text="Grille des programmes"/>
  <: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>
</.tip>
<.tip placement="left">
  <.button outline={true} text="Go left"/>
  <:tip>Yes this way !</:tip>
</.tip>
<.tip placement="right">
  <.button outline={true} text="Go right"/>
  <:tip>I'm lost.</:tip>
</.tip>
<.tip placement="bottom">
  <.button outline={true} text="Go down"/>
  <:tip>No this way !</:tip>
</.tip>
<.tip placement="top">
  <.button outline={true} text="Go up"/>
  <:tip>Oups…</:tip>
</.tip>
<.tip placement="right-start">
  <.button outline={true} text="Go right and up"/>
  <:tip>Finally !</:tip>
</.tip>