@shared-cms/tooltip

A reusable tooltip component built with Lit, TypeScript, and TailwindCSS. Perfect for displaying important information and user feedback.

Installation

npm install @shared-cms/tooltip

Usage

React/Remix/Next.js

import SharedTooltip from '@shared-cms/tooltip/react';
import '@shared-cms/tooltip/dist/style.css';

function App() {
  const [visible, setVisible] = useState(true);

  return (
    <SharedTooltip
      variant="info"
      dismissible
      visible={visible}
      onDismiss={() => setVisible(false)}
    >
      This is an informational message!
    </SharedTooltip>
  );
}

Angular/Vanilla JS

import '@shared-cms/tooltip/dist/style.css';

// HTML Template
<shared-tooltip
  variant="info"
  dismissible
  (dismiss)="handleDismiss($event)"
>
  This is an informational message!
</shared-tooltip>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'info' | 'success' | 'warning' | 'error' | 'info' | Alert style variant | | dismissible | boolean | false | Show dismiss button | | visible | boolean | true | Control visibility | | className | string | '' | Additional CSS classes | | onDismiss | () => void | - | Dismiss event handler | | onAction | () => void | - | Action event handler |

Variants

• info: Blue background for informational messages
• success: Green background for success messages
• warning: Yellow background for warning messages
• error: Red background for error messages

Accessibility

• Proper ARIA role="alert" attribute
• Keyboard navigation support
• Screen reader friendly
• Focus management for dismiss button

Styling

Since Shadow DOM is disabled, you can override styles:

.shared-cms-tooltip {
  border-radius: 8px !important;
}

.shared-cms-info {
  background-color: #eff6ff !important;
}

License

MIT License