Add comments
This commit is contained in:
parent
278d9d5c0a
commit
fed7708d29
|
@ -1,5 +1,6 @@
|
||||||
export default {
|
export default {
|
||||||
inserted: (el, {value}) => {
|
inserted: (el, {value}) => {
|
||||||
|
// First, we create the tooltip and arrow elements
|
||||||
const tooltip = document.createElement('div')
|
const tooltip = document.createElement('div')
|
||||||
tooltip.style.position = 'fixed'
|
tooltip.style.position = 'fixed'
|
||||||
tooltip.innerText = value
|
tooltip.innerText = value
|
||||||
|
@ -8,18 +9,30 @@ export default {
|
||||||
arrow.classList.add('tooltip-arrow')
|
arrow.classList.add('tooltip-arrow')
|
||||||
arrow.style.position = 'fixed'
|
arrow.style.position = 'fixed'
|
||||||
|
|
||||||
|
// We don't append the element until hovering over it because that's the most reliable way to determine
|
||||||
|
// where the parent elemtent is located at the time the user hovers over it.
|
||||||
el.addEventListener('mouseover', () => {
|
el.addEventListener('mouseover', () => {
|
||||||
const coords = el.getBoundingClientRect()
|
// Appending the element right away because we can only calculate the height of the element if it is
|
||||||
|
// already in the DOM.
|
||||||
document.body.appendChild(tooltip)
|
document.body.appendChild(tooltip)
|
||||||
|
document.body.appendChild(arrow)
|
||||||
|
|
||||||
|
const coords = el.getBoundingClientRect()
|
||||||
|
// The top position of the tooltip is the coordinates of the bound element - the height of the tooltip -
|
||||||
|
// 5px spacing for the arrow (which is exactly 5px high)
|
||||||
const top = coords.top - tooltip.offsetHeight - 5
|
const top = coords.top - tooltip.offsetHeight - 5
|
||||||
|
// The left position of the tooltip is calculated so that the middle point of the tooltip
|
||||||
|
// (where the arrow will be) is the middle of the bound element
|
||||||
const left = coords.left - (tooltip.offsetWidth / 2) + (el.offsetWidth / 2)
|
const left = coords.left - (tooltip.offsetWidth / 2) + (el.offsetWidth / 2)
|
||||||
|
// Now setting all the values
|
||||||
tooltip.style.top = `${top}px`
|
tooltip.style.top = `${top}px`
|
||||||
tooltip.style.left = `${coords.left}px`
|
tooltip.style.left = `${coords.left}px`
|
||||||
tooltip.style.left = `${left}px`
|
tooltip.style.left = `${left}px`
|
||||||
arrow.style.left = `${left + (tooltip.offsetWidth / 2) - (arrow.offsetWidth / 2)}px`
|
arrow.style.left = `${left + (tooltip.offsetWidth / 2) - (arrow.offsetWidth / 2)}px`
|
||||||
arrow.style.top = `${top + tooltip.offsetHeight}px`
|
arrow.style.top = `${top + tooltip.offsetHeight}px`
|
||||||
document.body.appendChild(arrow)
|
|
||||||
|
|
||||||
|
// And finally make it visible to the user. This will also trigger a nice fade-in animation through
|
||||||
|
// css transitions
|
||||||
tooltip.classList.add('visible')
|
tooltip.classList.add('visible')
|
||||||
arrow.classList.add('visible')
|
arrow.classList.add('visible')
|
||||||
})
|
})
|
||||||
|
@ -30,6 +43,7 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
unbind: el => {
|
unbind: el => {
|
||||||
|
// TODO: find the tooltip we added for that element and remove it from the dom.
|
||||||
console.log('unbind', el)
|
console.log('unbind', el)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue
Block a user