@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

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

or

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

Usage

`tsx
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 (
toolTipCopyText="Click to copy to clipboard"
toolTipIcon={}
/>
);
};

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

`bash


Install dependencies

yarn install

Start development server

yarn dev

Build the component

yarn build

Run linting

yarn lint
``

License

MIT