Tooltip Component

The Tooltip component is a React component designed display additional information data when hovering/taping a component.

Table of Contents

- Installation
- Usage
- Props
- Example
- Contributing

Installation

To use the Tooltip component in your React application, follow these steps:

$3

``bash
npm install @bolttech/frontend-foundations @bolttech/atoms-tooltip
`

or

`bash
yarn add @bolttech/frontend-foundations @bolttech/atoms-tooltip
`

Once you have the required dependencies installed, you can start using the Tooltip component in your React application.

Usage

The Tooltip component provides a easy way to display additional data when hovering on desktop or taping on a component on mobile.

To use the component, import it and include it in your JSX:

`jsx
import React from 'react';
import { Tooltip } from '@bolttech/atoms-tooltip';
import { Icon } from '@bolttech/atoms-icon';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
return (





);
}

export default App;
`

Props

The Tooltip component accepts the following props:

| Prop | Type | Description |
| ------------ | --------------- | --------------------------------------------------------------- |
| id | string | The HTML id attribute for the tooltip. |
| dataTestId | string | The data-testid attribute for testing purposes. |
| variant | TooltipVariants | Variant of the Tooltip component. |
| size | TooltipSizes | Size of the Tooltip component. |
| content | React.ReactNode | React node that will be rendered as the content of the Tooltip. |
| children | React.ReactNode | Component that will be used as the Tooltip wrapper. |

Example

Here's an example of using the Tooltip component:

`jsx
import React from 'react';
import { Tooltip } from '@bolttech/atoms-tooltip';
import { Icon } from '@bolttech/atoms-icon';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
return (





);
}

export default App;
``

This will render a icon with a Tooltip when you hover over it.

Contributing

Contributions to the Tooltip component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.