Tooltip Package

This package displays information when the user moves the mouse pointer over an trigger element.

Tooltip Usage

``jsx
import { Tooltip } from './Tooltip';

export const App = () => {
return (

Hover over me

Some content


);
};
`

Properties

$3

| Property | Type | Default | Description |
| ------------ | --------------------- | ------------------- | ----------------------------------------------------------- |
| children | ReactNode | - | Child components to be rendered |
| style | React.CSSProperties | - | Gives the Tooltip containter css properties |
| dataTestId | string | tooltip-container | Customizable test identifier |
| hideDelay | number | 0ms | Delay to hide tooltip when mouse leaving the target element |

$3

| Property | Type | Default | Description |
| ------------ | --------------------- | ----------------- | ------------------------------------------------------------------------------------- |
| children | ReactNode | - | Content showed on the Tooltip. When content is empty, the tooltip will not be showed. |
| direction | TooltipDirection | top | Determines the direction of the tooltip |
| background | TooltipBackground | full | Determines the background type of the tooltip |
| style | React.CSSProperties | - | Gives the Tooltip Content css properties |
| dataTestId | string | tooltip-content | Customizable test identifier |

$3

- TypeScript for static type checking
- React — JavaScript library for user interfaces
- Emotion — for writing css styles with JavaScript
- Storybook — UI component environment powered by Vite
- Jest - JavaScript Testing Framework
- React Testing Library - to test UI components in a user-centric way
- ESLint for code linting
- Prettier for code formatting
- Tsup — TypeScript bundler powered by esbuild
- Yarn from managing packages

$3

- yarn build - Build the package
- yarn dev - Run the package locally
- yarn lint - Lint all files within this package
- yarn test - Run all unit tests
- yarn test:report - Open the test coverage report
- yarn test:update:snapshot - Run all unit tests and update the snapshot

$3

Running yarn build from the root of the package will use tsup to compile the raw TypeScript and React code to plain JavaScript.

The /dist folder contains the compiled output.

`bash
tooltip
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
``

$3

Follows semantic versioning

© License

Licensed under MIT License