v1.0.0

README.md

@@ -0,0 +1,131 @@
+# 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'), 'Подсказка', {
+    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&times;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,
+            };
+        },
+    },
+});
+```
+
+#### Методы
+
+##### 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>
+```
+
+### Стили
+
+```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;
+    }
+
+    &__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);
+        }
+    }
+}
+```