public
/
tooltip
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: public:master
Branches Tags
public:master
public:v3.0.1
public:v3.0.0
public:v2.1.0
public:v2.0.0
public:v1.0.0
..
compare: public:v1.0.0
Branches Tags
public:master
public:v3.0.1
public:v3.0.0
public:v2.1.0
public:v2.0.0
public:v1.0.0

No commits in common. "master" and "v1.0.0" have entirely different histories.
master ... v1.0.0

5 changed files with 143 additions and 216 deletions
Show Stats Expand all files Collapse all files

1
.npmignore
View File

@ -1,6 +1,5 @@
.yarn
.editorconfig
.gitattributes
.pnp.cjs
.pnp.loader.mjs
.prettierrc

24
CHANGELOG.md
View File

@ -1,24 +0,0 @@
## v3.0.1
- Исправлена работа событий
## v3.0.0
- Исправлено название опции с `virtialReference` на `virtualReference`
## v2.1.0
- Для опции `appendTo` добавлена возможность указать значение `parent`
## v2.0.0
- К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
- Для функций `show/hide` добавлен параметр `immediately` для мнгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
- Добавлена опция `shiftPadding` для добавления отступов от краёв области видимости по осям x/y
- Добавлена опция `animation` для кастомизации анимации при открытии/закрытии всплывающей подсказки (для этого всё внутри `.tooltip` было обёрнуто в `.tooltip__root` и анимация применяется именно к этому блоку)
- Опция `_tooltip._options` переименована в `_tooltip.options`
- Оптимизция кода, исправление ошибок
- Доработки по README.md
- Доработки по .npmignore
## v1.0.0

46
README.md
View File

@ -28,10 +28,6 @@ createTooltip(document.querySelector('button'), 'Подсказка');
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],
@ -41,10 +37,9 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
interactive: true,
offset: [0, 8],
placement: 'top',
shiftPadding: [8, 0],
theme: 'light',
trigger: 'mouseenter',
virtualReference: undefined,
virtialReference: undefined,
zIndex: '',
// Callback-функции, по-умолчанию не заданы
onCreate(instance) {},
@ -56,7 +51,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
});
```
##### virtualReference
##### virtialReference
Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
@ -64,7 +59,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
```js
createTooltip(document.querySelector('button'), 'Подсказка', {
virtualReference: {
virtialReference: {
getBoundingClientRect() {
return {
x: 0,
@ -81,34 +76,8 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
});
```
#### Свойства
#### $tooltip
DOM-элемент всплывающей подсказки (имеет свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`)
#### options
Текущие настройки
#### isVisible
Видимость всплывающей подсказки - `true`/`false`
#### Методы
##### show
```js
document.querySelector('button')._tooltip.show();
```
##### hide
```js
document.querySelector('button')._tooltip.hide();
```
##### setContent
```js
@ -127,12 +96,6 @@ document.querySelector('button')._tooltip.updateOptions({ placement: 'bottom' })
<button type="button" data-tooltip-placement="bottom">Кнопка</button>
```
##### destroy
```js
document.querySelector('button')._tooltip.destroy();
```
### Стили
```scss
@ -150,9 +113,6 @@ $b: '.tooltip';
max-width: 300px;
}
&__root {
}
&__arrow {
#{$b}_theme_light & {
background-color: white;

286
index.js
View File

@ -3,58 +3,64 @@ const roundByDPR = (value) => {
return Math.round(value * dpr) / dpr;
};
const attributeToOption = (attribute) => {
attribute = attribute.replace('tooltip', '');
return attribute.charAt(0).toLowerCase() + attribute.slice(1);
};
export const createTooltip = ($el, content, options) => {
options = {
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, // Возможные значения: true, 'all', 'trigger'
hideOnClick: true,
interactive: true,
offset: [0, 8],
placement: 'top',
shiftPadding: [8, 0],
theme: 'light',
trigger: 'mouseenter',
virtualReference: undefined,
virtialReference: undefined,
zIndex: '',
...options,
};
const setOptionFromDataAttribute = (attribute) => {
if ($el.dataset[attribute] !== undefined) {
let value = $el.dataset[attribute];
try {
value = JSON.parse($el.dataset[attribute]);
} catch {}
options[attributeToOption(attribute)] = value;
}
};
if ($el.dataset.tooltipArrow !== undefined) {
options.arrow = $el.dataset.tooltipArrow === 'true';
}
setOptionFromDataAttribute('tooltipAnimation');
setOptionFromDataAttribute('tooltipAppendTo');
setOptionFromDataAttribute('tooltipArrow');
setOptionFromDataAttribute('tooltipDelay');
setOptionFromDataAttribute('tooltipDuration');
setOptionFromDataAttribute('tooltipEasing');
setOptionFromDataAttribute('tooltipHideOnClick');
setOptionFromDataAttribute('tooltipInteractive');
setOptionFromDataAttribute('tooltipOffset');
setOptionFromDataAttribute('tooltipPlacement');
setOptionFromDataAttribute('tooltipShiftPadding');
setOptionFromDataAttribute('tooltipTheme');
setOptionFromDataAttribute('tooltipTrigger');
setOptionFromDataAttribute('tooltipZIndex');
if ($el.dataset.tooltipHideOnClick !== undefined) {
switch ($el.dataset.tooltipHideOnClick) {
case 'all':
case 'toggle': {
options.hideOnClick = $el.dataset.tooltipHideOnClick;
break;
}
default: {
options.hideOnClick = $el.dataset.tooltipHideOnClick === 'true';
}
}
}
if ($el.dataset.tooltipInteractive !== undefined) {
options.interactive = $el.dataset.tooltipInteractive === 'true';
}
if ($el.dataset.tooltipOffset !== undefined) {
options.offset = JSON.parse($el.dataset.tooltipOffset);
}
if ($el.dataset.tooltipPlacement !== undefined) {
options.placement = $el.dataset.tooltipPlacement;
}
if ($el.dataset.tooltipTheme !== undefined) {
options.theme = $el.dataset.tooltipTheme;
}
if ($el.dataset.tooltipTrigger !== undefined) {
options.trigger = $el.dataset.tooltipTrigger;
}
if ($el.dataset.tooltipZIndex !== undefined) {
options.zIndex = $el.dataset.tooltipZIndex;
}
let showTimeout;
let hideTimeout;
@ -63,7 +69,7 @@ export const createTooltip = ($el, content, options) => {
const listeners = [];
$el._tooltip = {
options,
_options: options,
isVisible: false,
setContent(updatedContent) {
if (updatedContent !== undefined) {
@ -153,21 +159,18 @@ export const createTooltip = ($el, content, options) => {
options.onCreate($el._tooltip);
}
$el._tooltip.show = async (params = {}) => {
const { immediately } = params;
$el._tooltip.show = async () => {
clearTimeout(hideTimeout);
if (!$el._tooltip.$tooltip) {
const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
$el._tooltip.$tooltip = document.createElement('div');
$el._tooltip.$tooltip._reference = $el;
$el._tooltip.updatePosition = async () => {
const $arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
const { x, y, placement, middlewareData } = await computePosition(
options.virtualReference ?? $el,
options.virtialReference ?? $el,
$el._tooltip.$tooltip,
{
placement: options.placement,
@ -177,14 +180,7 @@ export const createTooltip = ($el, content, options) => {
crossAxis: options.offset[0],
}),
flip(),
shift({
padding: {
top: options.shiftPadding[1],
right: options.shiftPadding[0],
bottom: options.shiftPadding[1],
left: options.shiftPadding[0],
},
}),
shift(),
arrow({
element: $arrow,
padding: Number.parseInt(
@ -245,29 +241,27 @@ export const createTooltip = ($el, content, options) => {
$el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
$el._tooltip.$tooltip.innerHTML = `
<div class="tooltip__root">
${
options.interactive
? `
<div
class="tooltip__interactive-helper"
style="position: absolute; z-index; -1;">
</div>
`
: ''
}
${
options.arrow
? `
<div
class="tooltip__arrow"
style="pointer-events: none; position: absolute; transform: rotate(45deg);">
</div>
`
: ''
}
<div class="tooltip__container"></div>
</div>
${
options.interactive
? `
<div
class="tooltip__interactive-helper"
style="position: absolute; z-index; -1;">
</div>
`
: ''
}
${
options.arrow
? `
<div
class="tooltip__arrow"
style="pointer-events: none; position: absolute; transform: rotate(45deg);">
</div>
`
: ''
}
<div class="tooltip__container"></div>
`;
$el._tooltip.setContent();
@ -278,100 +272,86 @@ export const createTooltip = ($el, content, options) => {
const { autoUpdate } = await import('@floating-ui/dom');
showTimeout = setTimeout(
async () => {
if (!$el._tooltip.isVisible) {
if (options.appendTo === 'parent') {
$el.parentElement.append($el._tooltip.$tooltip);
} else {
options.appendTo.append($el._tooltip.$tooltip);
}
$el._tooltip.isVisible = true;
autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
showTimeout = setTimeout(async () => {
if (!$el._tooltip.isVisible) {
options.appendTo.append($el._tooltip.$tooltip);
$el._tooltip.isVisible = true;
autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
if (
options.hideOnClick &&
(options.trigger.includes('click') || options.trigger.includes('manual'))
) {
document.body.addEventListener('click', $el._tooltip.hideOnClickListener);
listeners.push({
el: document.body,
event: 'click',
listener: $el._tooltip.hideOnClickListener,
});
}
if (options.onShow) {
options.onShow($el._tooltip);
}
await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[0], {
duration: immediately ? 0 : options.duration[0],
easing: options.easing[0],
}).finished;
if (options.onShown) {
options.onShown($el._tooltip);
}
if (options.onShow) {
options.onShow($el._tooltip);
}
},
immediately ? 0 : options.delay[0],
);
await $el._tooltip.$tooltip.animate([{ opacity: 0 }, { opacity: 1 }], {
duration: options.duration[1],
easing: options.easing[1],
}).finished;
if (options.onShown) {
options.onShown($el._tooltip);
}
}
}, options.delay[0]);
};
$el._tooltip.hide = (params = {}) => {
const { immediately } = params;
$el._tooltip.hide = () => {
clearTimeout(showTimeout);
hideTimeout = setTimeout(
async () => {
if ($el._tooltip.isVisible) {
if (options.onHide) {
options.onHide($el._tooltip);
}
await $el._tooltip.$tooltip.querySelector('.tooltip__root').animate(options.animation[1], {
duration: immediately ? 0 : options.duration[1],
easing: options.easing[1],
}).finished;
$el._tooltip.$tooltip.remove();
$el._tooltip.isVisible = false;
autoUpdateCleanup();
if (options.onHidden) {
options.onHidden($el._tooltip);
}
hideTimeout = setTimeout(async () => {
if ($el._tooltip.isVisible) {
if (options.onHide) {
options.onHide($el._tooltip);
}
},
immediately ? 0 : options.delay[1],
);
await $el._tooltip.$tooltip.animate([{ opacity: 1 }, { opacity: 0 }], {
duration: options.duration[1],
easing: options.easing[1],
}).finished;
$el._tooltip.$tooltip.remove();
$el._tooltip.isVisible = false;
autoUpdateCleanup();
if (options.onHidden) {
options.onHidden($el._tooltip);
}
}
}, options.delay[1]);
};
$el._tooltip.hideOnClickListener = ({ target }) => {
const hideOnClickListener = ({ target }) => {
if (
$el._tooltip.isVisible &&
(options.hideOnClick === 'all' ||
$el.contains(target) ||
(options.hideOnClick !== 'toggle' && !$el._tooltip.$tooltip.contains(target)))
) {
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
document.body.removeEventListener('click', hideOnClickListener);
$el._tooltip.hide();
}
};
$el._tooltip.clickListener = () => {
const clickListener = () => {
if (!$el._tooltip.isVisible) {
$el._tooltip.show();
if (options.hideOnClick) {
setTimeout(() => {
document.body.addEventListener('click', hideOnClickListener);
listeners.push({
el: document.body,
event: 'click',
listener: hideOnClickListener,
});
});
}
}
};
$el._tooltip.mouseEnterListener = () => {
const mouseEnterListener = () => {
$el._tooltip.show();
};
$el._tooltip.mouseLeaveListener = ({ relatedTarget }) => {
const mouseLeaveListener = ({ relatedTarget }) => {
if (options.interactive) {
if ($el._tooltip.$tooltip.contains(relatedTarget)) {
$el._tooltip.$tooltip.addEventListener(
@ -397,36 +377,48 @@ export const createTooltip = ($el, content, options) => {
for (const trigger of options.trigger.split(' ')) {
switch (trigger) {
case 'mouseenter': {
$el.addEventListener('mouseenter', $el._tooltip.mouseEnterListener);
$el.addEventListener('mouseenter', mouseEnterListener);
listeners.push({
el: $el,
event: 'mouseenter',
listener: $el._tooltip.mouseEnterListener,
listener: mouseEnterListener,
});
$el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
$el.addEventListener('mouseleave', mouseLeaveListener);
listeners.push({
el: $el,
event: 'mouseleave',
listener: $el._tooltip.mouseLeaveListener,
listener: mouseLeaveListener,
});
break;
}
case 'click': {
$el.addEventListener('click', $el._tooltip.clickListener);
$el.addEventListener('click', clickListener);
listeners.push({
el: $el,
event: 'click',
listener: $el._tooltip.clickListener,
listener: clickListener,
});
if (!options.interactive) {
$el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
$el.addEventListener('mouseleave', mouseLeaveListener);
listeners.push({
el: $el,
event: 'mouseleave',
listener: $el._tooltip.mouseLeaveListener,
listener: mouseLeaveListener,
});
}
break;
}
case 'manual': {
if (options.hideOnClick) {
document.body.addEventListener('click', hideOnClickListener);
listeners.push({
el: document.body,
event: 'click',
listener: hideOnClickListener,
});
}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@advdominion/tooltip",
"version": "3.0.1",
"version": "1.0.0",
"type": "module",
"packageManager": "yarn@4.5.3",
"main": "index.js",