Tooltip

# Basics

Using the moonshine::tooltip component, you can create convenient tooltips.

Available locations:

bottom top left right

<x-moonshine::tooltip placement="bottom" content="Tooltip text">
    <button class="btn">Trigger</button>
</x-moonshine::tooltip>

<x-moonshine::tooltip placement="bottom" content="Tooltip text">
    <button class="btn">Trigger</button>
</x-moonshine::tooltip>

# Without using a component

<span x-data="tooltip('Tooltip content 1', {placement: 'top'})">
    <a class="text-purple font-semibold">Trigger 1</a>
</span>
or
<span
    x-data="tooltip"
    data-tippy-content="Tooltip content 2"
    data-tippy-placement="right">
    <a class="text-purple font-semibold">Trigger 2</a>
</span>

<span x-data="tooltip('Tooltip content 1', {placement: 'top'})">
    <a class="text-purple font-semibold">Trigger 1</a>
</span>
or
<span
    x-data="tooltip"
    data-tippy-content="Tooltip content 2"
    data-tippy-placement="right">
    <a class="text-purple font-semibold">Trigger 2</a>
</span>

Trigger 1 or Trigger 2