diff --git a/src/assets/styles/tooltips.css b/src/assets/styles/tooltips.css index 92420ed..7a91a15 100644 --- a/src/assets/styles/tooltips.css +++ b/src/assets/styles/tooltips.css @@ -10,4 +10,5 @@ border-radius: var(--border-radius-medium); white-space: nowrap; z-index: 999; + pointer-events: none; } diff --git a/src/tooltipMixin.js b/src/tooltipMixin.js index d0e101c..a76a48e 100644 --- a/src/tooltipMixin.js +++ b/src/tooltipMixin.js @@ -3,7 +3,8 @@ export default { return { tooltipStyle: { visibility: 'hidden' - } + }, + showTooltipTimeout: null } }, computed: { @@ -13,27 +14,30 @@ export default { }, methods: { showTooltip(e, tooltipPosition) { - const position = tooltipPosition - ? tooltipPosition.split('-') - : ['top', 'right'] - const offset = 12 + this.showTooltipTimeout = setTimeout(() => { + const position = tooltipPosition + ? tooltipPosition.split('-') + : ['top', 'right'] + const offset = 12 - if (position[0] === 'top') { - this.tooltipStyle.top = e.clientY - offset + 'px' - } else { - this.tooltipStyle.top = e.clientY + offset + 'px' - } + if (position[0] === 'top') { + this.tooltipStyle.top = e.clientY - offset + 'px' + } else { + this.tooltipStyle.top = e.clientY + offset + 'px' + } - if (position[1] === 'right') { - this.tooltipStyle.left = e.clientX + offset + 'px' - } else { - this.tooltipStyle.left = - e.clientX - offset - this.tooltipElement.offsetWidth + 'px' - } + if (position[1] === 'right') { + this.tooltipStyle.left = e.clientX + offset + 'px' + } else { + this.tooltipStyle.left = + e.clientX - offset - this.tooltipElement.offsetWidth + 'px' + } - this.tooltipStyle.visibility = 'visible' + this.tooltipStyle.visibility = 'visible' + }, 500) }, hideTooltip() { + this.showTooltipTimeout && clearTimeout(this.showTooltipTimeout) this.tooltipStyle.visibility = 'hidden' } }