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:

Installation

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

or

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:

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 (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Tooltip size="small" variant="dark" content="This is the tooltip text">
        <Icon icon="help" />
      </Tooltip>
    </BolttechThemeProvider>
  );
}

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:

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 (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Tooltip size="small" variant="dark" content="This is the tooltip text">
        <Icon icon="help" />
      </Tooltip>
    </BolttechThemeProvider>
  );
}

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.