Popper

                
                <!-- Tooltip -->

<p class="tu-typo-apply">
    Poppers can be shown in the form of a
    <span class="underline decoration-dotted"
          data-popper="popper-tooltip"
          data-popper-placement="top"
          data-popper-trigger="hover"
          data-popper-offset="0,10"
          aria-describedby="popper-tooltip">tooltip</span>.
</p>

<div id="popper-tooltip"
     class="px-2 py-1 text-sm max-w-sm tc-popper tc-style-inverse tu-border-radius tu-border-width tu-box-shadow"
     role="tooltip">
    This is a tooltip example. It hides and shows automatically.
    <div data-popper-arrow></div>
</div>

<!-- Menu -->

<button type="button" class="tc-btn tc-style-default"
        data-popper="popper-menu"
        data-popper-placement="bottom-end"
        data-popper-trigger="click"
        data-popper-offset="0,10">Open menu
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
         class="w-5 h-5 ml-2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
    </svg>
</button>

<div id="popper-menu" class="p-4 w-[225px] tc-popper tc-style-content tu-border-radius tu-border-width tu-box-shadow"
     role="menu" tabindex="0">

    <h3 class="uppercase tracking-wide font-semibold text-sm mb-2 tu-text-light">Menu</h3>

    <ul class="text-sm">
        <li><a href="#" title="First item" class="flex items-center p-2 hover:text-theme-primary hover:tu-bg-default tu-border-radius">First item</a></li>
        <li><a href="#" title="Second item" class="flex items-center p-2 hover:text-theme-primary hover:tu-bg-default tu-border-radius">Second item</a></li>
        <li><a href="#" title="Third item" class="flex items-center p-2 hover:text-theme-primary hover:tu-bg-default tu-border-radius">Third item</a></li>
        <li><a href="#" title="Fourth item" class="flex items-center p-2 hover:text-theme-primary hover:tu-bg-default tu-border-radius">Fourth item</a></li>
    </ul>

</div>