frontend/packages/tooltip/README.md

# tooltip

## Требования

- [Floating UI](https://floating-ui.com)

## Подключение и настройка

### HTML

```html
<button type="button">Кнопка</button>
```

### JS

#### Минимальные настройки

```js
import { createTooltip } from '@advdominion/tooltip';

createTooltip(document.querySelector('button'), 'Подсказка');
```

#### Все настройки со значениями по умолчанию

```js
import { createTooltip } from '@advdominion/tooltip';

createTooltip(document.querySelector('button'), 'Подсказка', {
    animation: [
        [{ opacity: 0 }, { opacity: 1 }],
        [{ opacity: 1 }, { opacity: 0 }],
    ],
    appendTo: document.body,
    arrow: { active: true, centered: false, padding: undefined },
    delay: [0, 0],
    duration: [0, 0],
    easing: ['linear', 'linear'],
    hideOnClick: true,
    interactive: true,
    offset: [0, 8],
    placement: 'top',
    shiftPadding: [8, 0],
    theme: 'light',
    trigger: 'mouseenter click',
    virtualReference: undefined,
    zIndex: '',
    // Callback-функции, по умолчанию не заданы
    onCreate(instance) {},
    onMount(instance) {},
    onShow(instance) {},
    onShown(instance) {},
    onHide(instance) {},
    onHidden(instance) {},
});
```

#### hideOnClick

- `true` (по умолчанию) — всплывающая подсказка скрывается при клике по любому элементу на странице (**кроме** самой всплывающей подсказки).
- `'all'` — всплывающая подсказка скрывается при клике по любому элементу на странице (**включая** саму всплывающую подсказку).
- `'toggle'` — всплывающая подсказка скрывается только при клике по элементу, который её вызывает.

#### arrow

Настройка отображения и позиционирования стрелки. Поддерживает булево значение (`true`/`false`) для обратной совместимости либо объект:

- `active` (`true`) — показывать ли стрелку. Эквивалент `arrow: true`/`arrow: false`.
- `centered` (`false`) — фиксировать стрелку по центру всплывающей подсказки, вместо того чтобы следовать за центром элемента, который её вызывает. Полезно, когда подсказка прижата к краю области видимости и стрелка смещается при прокрутке.
- `padding` (`undefined`) — отступ стрелки от краёв всплывающей подсказки. По умолчанию рассчитывается автоматически исходя из размера стрелки, чтобы её повёрнутые под 45° углы не выходили за границы подсказки.

```js
createTooltip(document.querySelector('button'), 'Подсказка', {
    arrow: { active: true, centered: true },
});
```

Так же настраивается через data-атрибут:

```html
<button type="button" data-tooltip-arrow='{"centered":true}'>Кнопка</button>
```

##### virtualReference

Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.

Например, позиционирование всплывающей подсказки относительно виртуального элемента размером 100&times;50, который располагается в левой верхней точке экрана:

```js
createTooltip(document.querySelector('button'), 'Подсказка', {
    virtualReference: {
        getBoundingClientRect() {
            return {
                x: 0,
                y: 0,
                top: 0,
                left: 0,
                bottom: 50,
                right: 100,
                width: 100,
                height: 50,
            };
        },
    },
});
```

#### Свойства

#### $tooltip

DOM-элемент всплывающей подсказки (имеет свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`)

#### options

Текущие настройки

#### isVisible

Видимость всплывающей подсказки - `true`/`false`

#### Методы

##### show

```js
document.querySelector('button')._tooltip.show();
```

##### hide

```js
document.querySelector('button')._tooltip.hide();
```

##### setContent

```js
document.querySelector('button')._tooltip.setContent('Новая подсказка');
```

##### updateOptions

```js
document.querySelector('button')._tooltip.updateOptions({ placement: 'bottom' });
```

Настройки так же можно переназначать, используя data-атрибуты:

```html
<button type="button" data-tooltip-placement="bottom">Кнопка</button>
```

##### destroy

```js
document.querySelector('button')._tooltip.destroy();
```

### Стили

```scss
$b: '.tooltip';

#{$b} {
    left: 0;
    max-width: calc(100vw - 32px);
    position: absolute;
    top: 0;
    width: max-content;
    will-change: transform;
    z-index: 200;

    @media (min-width: 900px) {
        max-width: 300px;
    }

    &__root {
    }

    &__arrow {
        #{$b}_theme_light & {
            background-color: white;
            height: 8px;
            width: 8px;
        }
    }

    &__container {
        #{$b}_theme_light & {
            background-color: white;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
        }
    }
}
```