172 lines
3.7 KiB
Markdown
172 lines
3.7 KiB
Markdown
# tooltip
|
||
|
||
## Требования
|
||
|
||
- [Floating UI](https://floating-ui.com) версии ^1.0.0
|
||
|
||
## Подключение и настройка
|
||
|
||
### 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: true,
|
||
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',
|
||
virtialReference: undefined,
|
||
zIndex: '',
|
||
// Callback-функции, по-умолчанию не заданы
|
||
onCreate(instance) {},
|
||
onMount(instance) {},
|
||
onShow(instance) {},
|
||
onShown(instance) {},
|
||
onHide(instance) {},
|
||
onHidden(instance) {},
|
||
});
|
||
```
|
||
|
||
##### virtialReference
|
||
|
||
Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
|
||
|
||
Например, позиционирование всплывающей подсказки относительно виртуального элемента размером 100×50, который располагается в левой верхней точке экрана:
|
||
|
||
```js
|
||
createTooltip(document.querySelector('button'), 'Подсказка', {
|
||
virtialReference: {
|
||
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;
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
```
|