Overlaystooltipactionsux
Action Tooltip
Tooltip that contains interactive buttons instead of just text.
Live Preview
Action required
Usage
Copy and paste this code into your React component:
tsx
import { TooltipActionTray } from 'react-component-kit-ui/overlays';
<TooltipActionTray>Content</TooltipActionTray>Manual Installation
If you are not using the npm package, create a new file and paste the following code: src/components/TooltipActionTray.tsx + TooltipActionTray.css:
TooltipActionTray.tsx
'use client';
import './TooltipActionTray.css';
/** TooltipActionTray โ ported from astro-component-kit. */
export interface TooltipActionTrayProps {
}
export function TooltipActionTray({}: TooltipActionTrayProps) {
return (
<>
<div className="act-tip" data-rk-b6e742="">
<div className="tip-body" data-rk-b6e742="">Action required</div>
<div className="tip-btns" data-rk-b6e742=""><button className="fix" data-rk-b6e742="">Fix</button><button className="ign" data-rk-b6e742="">Ignore</button></div>
</div>
</>
);
}
export default TooltipActionTray;TooltipActionTray.css
/* TooltipActionTray โ ported from astro-component-kit (overlays/TooltipActionTray.astro) */
.act-tip:where([data-rk-b6e742]) { 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:where([data-rk-b6e742]) { color: #fff; font-weight: 700; font-size: 0.8rem; margin-bottom: 8px; }
.tip-btns:where([data-rk-b6e742]) { display: flex; gap: 8px; }
button:where([data-rk-b6e742]) { padding: 4px 10px; font-size: 0.75rem; border-radius: 4px; border: none; cursor: pointer; font-weight: 600; }
.fix:where([data-rk-b6e742]) { background: #6366f1; color: #fff; }
.ign:where([data-rk-b6e742]) { background: #334155; color: #94a3b8; }Quick Info
- Category
- Overlays
- Filename
TooltipActionTray.tsx- Dependencies
- None โ pure React + CSS
- Tags
- tooltipactionsux