<script src="https://cdn.tailwindcss.com"></script>
<main class="w-full min-h-screen flex items-center p-16 bg-gray-200 justify-center">
<ul class="relative flex flex-col p-8 gap-6 border rounded-xl bg-white items-center justify-center">
  <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">Default</button>
    <div class="c-tooltip z-10">Content</div>
  </li>
    <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">Tertiary</button>
    <div class="c-tooltip t-tertiary">Content</div>
  </li>
  <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">Arrow at start</button>
    <div class="z-10 c-tooltip s-arrow-start">Content</div>
  </li>
  <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">Arrow at end</button>
    <div class="z-10 c-tooltip s-arrow-end">Content</div>
  </li>
  <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">Center Arrow</button>
    <div class="z-10 c-tooltip">Content</div>
  </li>
  <li>
    <button class="bg-gray-100 rounded px-4 py-2 border">On Parent</button>
    <div class="c-tooltip left-0">Content</div>
  </li>
  <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">Bottom</button>
    <div class="c-tooltip z-10 s-place-bottom">Content</div>
  </li>
  <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">Left</button>
    <div class="c-tooltip s-place-left">Content</div>
  </li>
  <li>
    <button class="bg-gray-100 rounded px-4 py-2 border">Bottom of Parent</button>
    <div class="c-tooltip s-place-bottom left-0">Content</div>
  </li>
  <li>
    <button class="bg-gray-100 rounded px-4 py-2 border">Left of Parent</button>
    <div class="c-tooltip s-place-left">Content</div>
  </li>
  <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">Start Tooltip</button>
    <div class="z-10 c-tooltip ml-0">Content</div>
  </li>
  <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">End Tooltip</button>
    <div class="z-10 c-tooltip mr-0">Content</div>
  </li>
  <li class="relative">
    <button class="bg-gray-100 rounded px-4 py-2 border">No Rounding</button>
    <div class="z-10 c-tooltip rounded-none">Content</div>
  </li>
</ul>
  </main>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          main: 'rgb(var(--avt-main-rgb))',
          contrast: 'rgb(var(--avt-contrast-rgb))',
        }
      }
    }
  }
</script>

<style type="text/tailwindcss">
  @layer components {
      * {
        border-style: solid;
        border-width: 0;
        border-color: currentColor;
        
        outline-style: solid;
        outline-width: 0;
      }
      
      :root {
        --avt-blue-100:   13 177 75;
        --avt-green-100:  45 103 197;
        --avt-green-400:  17 43 84;
        --avt-red-100:    230 65 38;
        --avt-white:      255 255 255;
        --avt-black:      0 0 0;
      }
      
      .c-tooltip {
       @apply s-tooltip m-solid t-primary i-hover-parent a-fade s-place-top;
      }
      
      
      .s-tooltip {
        @apply px-[1em] py-[0.5em] rounded-lg mx-auto inset-x-0 inline w-max;
      }
      .m-solid {
        @apply bg-main text-contrast;
      }
      .m-solid::before {
        border: 0.5em solid transparent;
      }
      .s-tooltip::before {
        @apply absolute block w-0 h-0;  
        @apply inset-x-0 mx-auto;
        content: '';
        border: 0.5em solid transparent;
      }
      
      .s-place-top {
        @apply absolute bottom-full my-2;
      }
      .s-place-top::before {
        bottom: auto;
        top: 100%;
        border-color: transparent;
        border-top-color: rgba(var(--avt-main-rgb) / 1);
      }
      
      .s-place-left {
        @apply absolute right-full inset-auto mx-2 inset-y-1/2 -translate-y-1/2 my-0 h-max;
      }
      .s-place-left::before {
        @apply inset-y-[calc(50%-0.5em)];
        right: auto;
        left: 100%;
        border-color: transparent;
        border-left-color: rgba(var(--avt-main-rgb) / 1);
      }
      
      .s-place-bottom {
        @apply absolute top-full bottom-auto inset-x-0 my-2;
      }
      .s-place-bottom::before {
        top: auto;
        bottom: 100%;
        border-color: transparent;
        border-bottom-color: rgba(var(--avt-main-rgb) / 1);
      }
      
      .s-arrow-start::before {
        @apply inset-x-auto left-0 translate-x-full;
      }
      .s-arrow-end::before {
        @apply inset-x-auto right-0 -translate-x-full;
      }
      
      
      .a-fade {
        opacity: 0;
        pointer-events: none;
        @apply transition duration-300;
      }
      
      *:hover>.i-hover-parent {
        opacity: 1;
        pointer-events: auto;
      }
      
      
      .t-primary {
        --avt-main-rgb: var(--avt-blue-100);
        --avt-contrast-rgb: var(--avt-white);
      }
      .t-secondary {
        --avt-main-rgb: var(--avt-green-100);
        --avt-contrast-rgb: var(--avt-white);
      }
      .t-tertiary {
        --avt-main-rgb: var(--avt-green-400);
        --avt-contrast-rgb: var(--avt-white);
      }
      .t-danger {
        --avt-main-rgb: var(--avt-red-100);
        --avt-contrast-rgb: var(--avt-white);
      }
      .t-white {
        --avt-main-rgb: var(--avt-white);
        --avt-contrast-rgb: var(--avt-black);
      }
    }
    </style>