1 GitHub star = 1 new component.

Star the repo
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