# Tooltip

The `Tooltip` component provides a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FHJjyHoLjikSvHG8oNpi5%2Ftooltip.png?alt=media&#x26;token=bfa497fe-ec08-4fd1-96d1-53d277c243ae" alt="Gravity tooltip component" width="135"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <TooltipProvider>
      <Tooltip>
      
        <TooltipTrigger asChild>
          <button>Hover me</button>
        </TooltipTrigger>
        
        <TooltipContent>
          Tooltip content goes here
        </TooltipContent>
        
      </Tooltip>
    </TooltipProvider>
  );
}
```

### Props

| Prop       | Description                            | Required | Value                |
| ---------- | -------------------------------------- | -------- | -------------------- |
| className  | custom styling                         | optional | SCSS or Tailwind     |
| children   | component(s) to wrap within tooltip    | optional | component(s)         |
| sideOffset | offset of the tooltip from the trigger | optional | integer (default: 4) |

### Notes

* The `Tooltip` component uses `TooltipPrimitive` from `@radix-ui/react-tooltip` for tooltip functionality.
* The `className` prop allows for custom styling to be applied.
* The `children` prop is required and should include the trigger and content for the tooltip.
* The `sideOffset` prop specifies the offset of the tooltip from the trigger and defaults to 4.
* For more details, refer to the [Shadcn Tooltip documentation](https://ui.shadcn.com/docs/components/tooltip).