1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Модальные окнаtooltipactionsux

Action Tooltip

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

Живое превью

Action required

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

Скопируйте и вставьте этот код в ваш React-компонент:

tsx
import { TooltipActionTray } from 'react-component-kit-ui/overlays';

<TooltipActionTray>Content</TooltipActionTray>

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

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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; }

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

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