Tooltip
=======

*   GitHub: [BonnierNews/dn-design-system/web/src/components/tooltip](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/tooltip)
*   Storybook: [Tooltip](https://designsystem.dn.se/?path=/docs/basic-tooltip--docs)

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/tooltip/tooltip.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| arrowPosition\* | Position of tooltip arrow<br />"top", "bottom" | \- |
| title | Title in tooltip<br />string | \- |
| forceOpen | Show tooltip on render<br />boolean | false |
| closeButton | Render close button if true<br />boolean | false |
| closeOnClickOutside | Set to true to be able to close tooltip when clicking outside of it<br />boolean | false |
| children | Additional tooltip content<br />ComponentChild | \- |
| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | false |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |

```jsx
<Tooltip
  arrowPosition="top"
  closeButton
  closeOnClickOutside
>
  <React.Fragment key=".0">
    <h2>
      Senaste nytt    </h2>
    <p>
      Här är en text om en ny liten funktion vi har.    </p>
  </React.Fragment>
</Tooltip>
```