Создание компонента Tooltip в Alpine.js

Всплывающая подсказка (Tooltip) на Alpine.js и Tailwind CSS

Всплывающие подсказки помогают показывать дополнительную информацию, когда пользователь наводит курсор на элемент. Сделать их можно очень легко с Alpine.js и Tailwind CSS.

---

Пример кода

<div x-data="{ open: false }" class="relative inline-block">
  <!-- Кнопка -->
  <button 
    @mouseenter="open = true" 
    @mouseleave="open = false"
    class="px-4 py-2 bg-blue-500 text-white rounded">
    Наведите на меня
  </button>

  <!-- Подсказка -->
  <div 
    x-show="open"
    class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 bg-gray-800 text-white text-sm rounded-lg shadow-lg p-2"
    style="display: none;">
    Это всплывающая подсказка!
  </div>
</div>

---

Как это работает

1. Переменная состояния
   В x-data="{ open: false }" создаём переменную open.
   Она управляет показом подсказки:
   • false — скрыта,
   • true — показана.
2. Кнопка
   События:
   • @mouseenter="open = true" — подсказка появляется при наведении,
   • @mouseleave="open = false" — скрывается при уходе курсора.
3. Подсказка
   Атрибут x-show="open" делает её видимой только тогда, когда open = true.
4. Стилизация и позиция
   • Тёмный фон, белый текст, закруглённые углы (bg-gray-800 text-white rounded-lg).
   • Класс absolute left-1/2 transform -translate-x-1/2 центрирует подсказку относительно кнопки.
   • mt-2 добавляет небольшой отступ сверху.

---

Итог

Когда пользователь наводит курсор на кнопку, появляется аккуратная подсказка с текстом. Убираем курсор — подсказка исчезает.