UI компоненты

Всплывающая подсказка

Основы

Используя компонент moonshine::tooltip, вы можете создавать удобные всплывающие подсказки.

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

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

Без использования компонента

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

или

<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"
    data-tippy-content="Tooltip content 2"
    data-tippy-placement="right">
    <a class="text-purple font-semibold">Trigger 2</a>
</span>