Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4a8b4405b2 | ||
|
|
eb664afa8f | ||
|
|
06b0cfc20a |
@@ -1,3 +1,11 @@
|
|||||||
|
## v3.0.0
|
||||||
|
|
||||||
|
- Исправлено название опции с `virtialReference` на `virtualReference`
|
||||||
|
|
||||||
|
## v2.1.0
|
||||||
|
|
||||||
|
- Для опции `appendTo` добавлена возможность указать значение `parent`
|
||||||
|
|
||||||
## v2.0.0
|
## v2.0.0
|
||||||
|
|
||||||
- К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
|
- К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
|
|||||||
shiftPadding: [8, 0],
|
shiftPadding: [8, 0],
|
||||||
theme: 'light',
|
theme: 'light',
|
||||||
trigger: 'mouseenter',
|
trigger: 'mouseenter',
|
||||||
virtialReference: undefined,
|
virtualReference: undefined,
|
||||||
zIndex: '',
|
zIndex: '',
|
||||||
// Callback-функции, по-умолчанию не заданы
|
// Callback-функции, по-умолчанию не заданы
|
||||||
onCreate(instance) {},
|
onCreate(instance) {},
|
||||||
@@ -56,7 +56,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
##### virtialReference
|
##### virtualReference
|
||||||
|
|
||||||
Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
|
Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
|
||||||
|
|
||||||
@@ -64,7 +64,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
createTooltip(document.querySelector('button'), 'Подсказка', {
|
createTooltip(document.querySelector('button'), 'Подсказка', {
|
||||||
virtialReference: {
|
virtualReference: {
|
||||||
getBoundingClientRect() {
|
getBoundingClientRect() {
|
||||||
return {
|
return {
|
||||||
x: 0,
|
x: 0,
|
||||||
|
|||||||
11
index.js
11
index.js
@@ -26,7 +26,7 @@ export const createTooltip = ($el, content, options) => {
|
|||||||
shiftPadding: [8, 0],
|
shiftPadding: [8, 0],
|
||||||
theme: 'light',
|
theme: 'light',
|
||||||
trigger: 'mouseenter',
|
trigger: 'mouseenter',
|
||||||
virtialReference: undefined,
|
virtualReference: undefined,
|
||||||
zIndex: '',
|
zIndex: '',
|
||||||
...options,
|
...options,
|
||||||
};
|
};
|
||||||
@@ -42,6 +42,7 @@ export const createTooltip = ($el, content, options) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
setOptionFromDataAttribute('tooltipAnimation');
|
setOptionFromDataAttribute('tooltipAnimation');
|
||||||
|
setOptionFromDataAttribute('tooltipAppendTo');
|
||||||
setOptionFromDataAttribute('tooltipArrow');
|
setOptionFromDataAttribute('tooltipArrow');
|
||||||
setOptionFromDataAttribute('tooltipDelay');
|
setOptionFromDataAttribute('tooltipDelay');
|
||||||
setOptionFromDataAttribute('tooltipDuration');
|
setOptionFromDataAttribute('tooltipDuration');
|
||||||
@@ -166,7 +167,7 @@ export const createTooltip = ($el, content, options) => {
|
|||||||
const $arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
|
const $arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
|
||||||
|
|
||||||
const { x, y, placement, middlewareData } = await computePosition(
|
const { x, y, placement, middlewareData } = await computePosition(
|
||||||
options.virtialReference ?? $el,
|
options.virtualReference ?? $el,
|
||||||
$el._tooltip.$tooltip,
|
$el._tooltip.$tooltip,
|
||||||
{
|
{
|
||||||
placement: options.placement,
|
placement: options.placement,
|
||||||
@@ -280,7 +281,11 @@ export const createTooltip = ($el, content, options) => {
|
|||||||
showTimeout = setTimeout(
|
showTimeout = setTimeout(
|
||||||
async () => {
|
async () => {
|
||||||
if (!$el._tooltip.isVisible) {
|
if (!$el._tooltip.isVisible) {
|
||||||
options.appendTo.append($el._tooltip.$tooltip);
|
if (options.appendTo === 'parent') {
|
||||||
|
$el.parentElement.append($el._tooltip.$tooltip);
|
||||||
|
} else {
|
||||||
|
options.appendTo.append($el._tooltip.$tooltip);
|
||||||
|
}
|
||||||
$el._tooltip.isVisible = true;
|
$el._tooltip.isVisible = true;
|
||||||
autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
|
autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@advdominion/tooltip",
|
"name": "@advdominion/tooltip",
|
||||||
"version": "2.0.0",
|
"version": "3.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"packageManager": "yarn@4.5.3",
|
"packageManager": "yarn@4.5.3",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
|
|||||||
Reference in New Issue
Block a user