Модальные окна tooltipactionsux

Action Tooltip

Расширенная подсказка с интерактивными кнопками действий вместо простого текста.

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

---
import { ActionTooltip } from 'astro-component-kit';
---

<TooltipActionTray>Content</TooltipActionTray>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/ActionTooltip.astro:

---
---
<div class="act-tip">
  <div class="tip-body">Action required</div>
  <div class="tip-btns"><button class="fix">Fix</button><button class="ign">Ignore</button></div>
</div>
<style>
  .act-tip { position: relative; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: fit-content; }
  .tip-body { color: #fff; font-weight: 700; font-size: 0.8rem; margin-bottom: 8px; }
  .tip-btns { display: flex; gap: 8px; }
  button { padding: 4px 10px; font-size: 0.75rem; border-radius: 4px; border: none; cursor: pointer; font-weight: 600; }
  .fix { background: #6366f1; color: #fff; }
  .ign { background: #334155; color: #94a3b8; }
</style>

Краткая информация

Категория: Модальные окна
Имя файла: ActionTooltip.astro
Зависимости: Нет — чистый Astro + CSS
Теги: tooltipactionsux

Живое превью

Использование

Ручная установка

Краткая информация