@rhc-shared-components/tool-tip

A reusable React tooltip component built with PatternFly for Red Hat Certified Apps

Overview

The ToolTip component provides a simple, accessible tooltip wrapper around PatternFly's Tooltip component. It displays a tooltip with custom text when hovering over an interactive button element containing an icon.

Install

yarn add @rhc-shared-components/tool-tip

or

npm install @rhc-shared-components/tool-tip

Usage

import React from 'react';
import { ToolTip } from '@rhc-shared-components/tool-tip';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';

const App = () => {
  return (
    <ToolTip 
      toolTipCopyText="Click to copy to clipboard" 
      toolTipIcon={<CopyIcon />} 
    />
  );
};

export default App;

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | toolTipCopyText | string | Yes | The text content displayed in the tooltip | | toolTipIcon | React.ReactNode | Yes | The icon element displayed inside the button |

Features

• Built on PatternFly React components for consistency
• Accessible with proper ARIA attributes
• Clickable button with hover tooltip
• Supports any React node as an icon
• TypeScript support included

Peer Dependencies

This component requires the following peer dependencies:

• @patternfly/react-core >= 5.3.4
• @patternfly/react-icons >= 5.3.2
• react >= 16.13.1
• react-dom >= 16.13.1

Development

# Install dependencies
yarn install

# Start development server
yarn dev

# Build the component
yarn build

# Run linting
yarn lint

License

MIT