Overlays tooltipactionsux

Action Tooltip

Tooltip that contains interactive buttons instead of just text.

Action required

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/ActionTooltip.astro and paste the following code:

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>

Quick Info

Category
Overlays
Filename
ActionTooltip.astro
Dependencies
None — pure Astro + CSS
Tags
tooltipactionsux