- 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)
- Storybook (Latest): [Tooltip](https://designsystem-latest.dn.se/?path=/docs/basic-tooltip--docs)

----

# Tooltip


## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
| arrowPosition | String | yes | "top" or "bottom" | | Position of tooltip arrow |
| title | String | no | | | Title in tooltip |
| closeButton | bool | no | true, false | false | Render close button if true  |
| closeOnClickOutside | bool | no | true, false | false | Set to true to be able to close tooltip when clicking outside of it  |
| forceOpen | bool | no | true, false | false | Show tooltip on render |
| classNames | String | no | | | Ex. "my-special-class" |
| attributes | Object | no | | | Ex. { data-prop: value } |
| forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

## Minimum requirement example

These are copy paste friendly examples to quickliy get started using a component.

### Nunjucks

```javascript
{% from '@bonniernews/dn-design-system-web/components/tooltip/tooltip.njk' import Tooltip %}

{% call Tooltip({closeButton: true, closeOnClickOutside: false, arrowPosition: "top"}) %}
  <h2>Titel</h2>
  <p>Text i vår tooltip</p>
{% endcall %}
```

### Scss

```scss
@use "@bonniernews/dn-design-system-web/components/tooltip/tooltip";
```

### Javascript

```javascript
import { initTooltip, openTooltip } from '@bonniernews/dn-design-system-web/components/tooltip/tooltip.js'
const tooltipEl = document.querySelector(".ds-tooltip");
initTooltip(tooltipEl);
openTooltip(tooltipEl);
```