1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas tooltipactionsux

Action Tooltip

Tooltip enriquecido que incluye botones de acción interactivos además de texto.

Action required

Uso

Copia y pega este código directamente en tu página de Astro:

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

<TooltipActionTray>Content</TooltipActionTray>
--- import { ActionTooltip } from 'astro-component-kit'; --- <TooltipActionTray>Content</TooltipActionTray>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/ActionTooltip.astro:

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

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
ActionTooltip.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
tooltipactionsux