mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-24 19:11:44 +01:00
69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<div ref="box" class="tooltip-box" @mouseover="mouseover" @mouseleave="mouseleave">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
direction: {
|
|
type: String,
|
|
default: 'right'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tooltip: null,
|
|
isShowing: false
|
|
}
|
|
},
|
|
methods: {
|
|
createTooltip() {
|
|
var boxChow = this.$refs.box.getBoundingClientRect()
|
|
var top = 0
|
|
var left = 0
|
|
if (this.direction === 'right') {
|
|
top = boxChow.top
|
|
left = boxChow.left + boxChow.width + 4
|
|
} else if (this.direction === 'bottom') {
|
|
top = boxChow.top + boxChow.height + 4
|
|
left = boxChow.left
|
|
}
|
|
var tooltip = document.createElement('div')
|
|
tooltip.className = 'absolute px-2 bg-black bg-opacity-90 py-1 text-white pointer-events-none text-xs rounded shadow-lg'
|
|
tooltip.style.top = top + 'px'
|
|
tooltip.style.left = left + 'px'
|
|
tooltip.style.zIndex = 100
|
|
tooltip.innerText = this.text
|
|
this.tooltip = tooltip
|
|
},
|
|
showTooltip() {
|
|
if (!this.tooltip) {
|
|
this.createTooltip()
|
|
}
|
|
document.body.appendChild(this.tooltip)
|
|
this.isShowing = true
|
|
},
|
|
hideTooltip() {
|
|
if (!this.tooltip) return
|
|
this.tooltip.remove()
|
|
this.isShowing = false
|
|
},
|
|
mouseover() {
|
|
if (!this.isShowing) this.showTooltip()
|
|
},
|
|
mouseleave() {
|
|
if (this.isShowing) this.hideTooltip()
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.hideTooltip()
|
|
}
|
|
}
|
|
</script>
|