Tooltip

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

Sections
- Basics
- Without use component

# Basics

Using the moonshine::tooltip component, you can create handy tooltips

Доступные расположения:

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 use 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