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:v2.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 "v2.0.0" have entirely different histories.
master ... v2.0.0

4 changed files with 42 additions and 49 deletions
Show Stats Expand all files Collapse all files

12
CHANGELOG.md
View File

@ -1,15 +1,3 @@
## v3.0.1
- Исправлена работа событий
## v3.0.0
- Исправлено название опции с `virtialReference` на `virtualReference`
## v2.1.0
- Для опции `appendTo` добавлена возможность указать значение `parent`
## v2.0.0 ## v2.0.0
- К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip` - К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`

6
README.md
View File

@ -44,7 +44,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
shiftPadding: [8, 0], shiftPadding: [8, 0],
theme: 'light', theme: 'light',
trigger: 'mouseenter', trigger: 'mouseenter',
virtualReference: undefined, virtialReference: undefined,
zIndex: '', zIndex: '',
// Callback-функции, по-умолчанию не заданы // Callback-функции, по-умолчанию не заданы
onCreate(instance) {}, onCreate(instance) {},
@ -56,7 +56,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
}); });
``` ```
##### virtualReference ##### virtialReference
Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`. Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
@ -64,7 +64,7 @@ createTooltip(document.querySelector('button'), 'Подсказка', {
```js ```js
createTooltip(document.querySelector('button'), 'Подсказка', { createTooltip(document.querySelector('button'), 'Подсказка', {
virtualReference: { virtialReference: {
getBoundingClientRect() { getBoundingClientRect() {
return { return {
x: 0, x: 0,

71
index.js
View File

@ -26,7 +26,7 @@ export const createTooltip = ($el, content, options) => {
shiftPadding: [8, 0], shiftPadding: [8, 0],
theme: 'light', theme: 'light',
trigger: 'mouseenter', trigger: 'mouseenter',
virtualReference: undefined, virtialReference: undefined,
zIndex: '', zIndex: '',
...options, ...options,
}; };
@ -42,7 +42,6 @@ export const createTooltip = ($el, content, options) => {
}; };
setOptionFromDataAttribute('tooltipAnimation'); setOptionFromDataAttribute('tooltipAnimation');
setOptionFromDataAttribute('tooltipAppendTo');
setOptionFromDataAttribute('tooltipArrow'); setOptionFromDataAttribute('tooltipArrow');
setOptionFromDataAttribute('tooltipDelay'); setOptionFromDataAttribute('tooltipDelay');
setOptionFromDataAttribute('tooltipDuration'); setOptionFromDataAttribute('tooltipDuration');
@ -167,7 +166,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.virtualReference ?? $el, options.virtialReference ?? $el,
$el._tooltip.$tooltip, $el._tooltip.$tooltip,
{ {
placement: options.placement, placement: options.placement,
@ -281,26 +280,10 @@ export const createTooltip = ($el, content, options) => {
showTimeout = setTimeout( showTimeout = setTimeout(
async () => { async () => {
if (!$el._tooltip.isVisible) { if (!$el._tooltip.isVisible) {
if (options.appendTo === 'parent') { options.appendTo.append($el._tooltip.$tooltip);
$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);
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) { if (options.onShow) {
options.onShow($el._tooltip); options.onShow($el._tooltip);
} }
@ -349,29 +332,39 @@ export const createTooltip = ($el, content, options) => {
); );
}; };
$el._tooltip.hideOnClickListener = ({ target }) => { const hideOnClickListener = ({ target }) => {
if ( if (
$el._tooltip.isVisible && $el._tooltip.isVisible &&
(options.hideOnClick === 'all' || (options.hideOnClick === 'all' ||
$el.contains(target) || $el.contains(target) ||
(options.hideOnClick !== 'toggle' && !$el._tooltip.$tooltip.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.hide();
} }
}; };
$el._tooltip.clickListener = () => { const clickListener = () => {
if (!$el._tooltip.isVisible) { if (!$el._tooltip.isVisible) {
$el._tooltip.show(); $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.show();
}; };
$el._tooltip.mouseLeaveListener = ({ relatedTarget }) => { const mouseLeaveListener = ({ relatedTarget }) => {
if (options.interactive) { if (options.interactive) {
if ($el._tooltip.$tooltip.contains(relatedTarget)) { if ($el._tooltip.$tooltip.contains(relatedTarget)) {
$el._tooltip.$tooltip.addEventListener( $el._tooltip.$tooltip.addEventListener(
@ -397,36 +390,48 @@ export const createTooltip = ($el, content, options) => {
for (const trigger of options.trigger.split(' ')) { for (const trigger of options.trigger.split(' ')) {
switch (trigger) { switch (trigger) {
case 'mouseenter': { case 'mouseenter': {
$el.addEventListener('mouseenter', $el._tooltip.mouseEnterListener); $el.addEventListener('mouseenter', mouseEnterListener);
listeners.push({ listeners.push({
el: $el, el: $el,
event: 'mouseenter', event: 'mouseenter',
listener: $el._tooltip.mouseEnterListener, listener: mouseEnterListener,
}); });
$el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener); $el.addEventListener('mouseleave', mouseLeaveListener);
listeners.push({ listeners.push({
el: $el, el: $el,
event: 'mouseleave', event: 'mouseleave',
listener: $el._tooltip.mouseLeaveListener, listener: mouseLeaveListener,
}); });
break; break;
} }
case 'click': { case 'click': {
$el.addEventListener('click', $el._tooltip.clickListener); $el.addEventListener('click', clickListener);
listeners.push({ listeners.push({
el: $el, el: $el,
event: 'click', event: 'click',
listener: $el._tooltip.clickListener, listener: clickListener,
}); });
if (!options.interactive) { if (!options.interactive) {
$el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener); $el.addEventListener('mouseleave', mouseLeaveListener);
listeners.push({ listeners.push({
el: $el, el: $el,
event: 'mouseleave', 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", "name": "@advdominion/tooltip",
"version": "3.0.1", "version": "2.0.0",
"type": "module", "type": "module",
"packageManager": "yarn@4.5.3", "packageManager": "yarn@4.5.3",
"main": "index.js", "main": "index.js",