Tooltip

View component on Github This page on Github
Example 

<button
  x-data
  x-tooltip="tooltip"
  class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
  Hover me
</button>

Usage

<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/plugins/use-floating/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/tooltip/dist/cdn.min.js"></script>

The tooltip can be added to any element using the x-tooltip directive. Use the directive's value to set the tooltip text and modifiers to customize it. If the element is not part of another Alpine component, you should also add x-data directive to it.

<button x-data x-tooltip="tooltip">
  Hover me
</button>

Modifiers

  • placement modifiers: top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end
  • delay:x - delay before showing and hiding tooltip, for example, delay:300 (default 50)
  • offset-x:x - right and left offset of the tooltip relative to the element, for example, offset-x:5 (default 0)
  • offset-y:x - top and bottom offset of the tooltip relative to the element, for example, offset-y:5 (default 0)
  • flip - allows flipping of the tooltip to the opposite placement if outside of current view (default false)
  • auto-placement - automatically calculates best placement for the tooltip (default false)
  • func - the value will be evaluated by Alpine. This can be useful for dynamic tooltips. (default false)
  • html - allows html in the value
  • fade and scale-fade - animation modifiers

Tooltip placement

Example 

<button
  x-data
  x-tooltip.right="tooltip on the right"
  class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
  Hover me
</button>

Tooltip delay

Example 

<button
  x-data
  x-tooltip.delay:300="tooltip with a 300ms delay"
  class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
  Hover me
</button>

Tooltip offset

Example 

<button
  x-data
  x-tooltip.offset-y:5="tooltip"
  class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
  Hover me
</button>

Function tooltip content

Example 

<button
  x-data
  x-tooltip.func="() => `Function text ${(Math.random() * 100).toFixed(0)}`"
  class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
  Hover me
</button>

Tooltip animation

Example 

<div class="flex">
  <button
    x-data
    x-tooltip.offset-y:5.fade="tooltip"
    class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Hover me (fade)
  </button>
  <button
    x-data
    x-tooltip.offset-y:5.scale-fade="tooltip"
    class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
  >
    Hover me (scale-fade)
  </button>
</div>

HTML tooltip

Example 

<button
  x-data
  x-tooltip.offset-y:5.html="This tooltip allows <span class='underline'>html</span> inside"
  class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
  Hover me
</button>
Litewind-alpine 0.1.35
Components Documentation