tooltip/README.md

tooltip

Требования

• Floating UI версии ^1.0.0

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

HTML

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

JS

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

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

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

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

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

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

virtialReference

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

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

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

Методы

setContent

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

updateOptions

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

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

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

Стили

$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;
    }

    &__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);
        }
    }
}