199 lines
5.9 KiB
Markdown
199 lines
5.9 KiB
Markdown
# 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×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);
|
||
}
|
||
}
|
||
}
|
||
```
|