<.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="See campaigns"/>
  <: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>
</.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>

<.tip>
  <a href="https://tinyurl.com/8tf6n6sk" class="hover:animate-pulse hover:text-danger" target="_blank">Watch a video</a>
  <:tip>This is not a Rick Roll !</:tip>
</.tip>