Tool tip component
npm install @rhc-shared-components/tool-tip> A reusable React tooltip component built with PatternFly for Red Hat Certified Apps
 
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.
``bash`
yarn add @rhc-shared-components/tool-tip
or
`bash`
npm install @rhc-shared-components/tool-tip
`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 (
toolTipIcon={
/>
);
};
export default App;
`
| 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 |
- 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
This component requires the following peer dependencies:
- @patternfly/react-core >= 5.3.4@patternfly/react-icons
- >= 5.3.2 react
- >= 16.13.1react-dom
- >= 16.13.1
`bashInstall dependencies
yarn install
MIT