vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Add comments

This commit is contained in:
kolaente 2020-11-02 23:19:28 +01:00
parent 278d9d5c0a
commit fed7708d29
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/directives/tooltip.js
View File

@ -1,5 +1,6 @@
export default {
inserted: (el, {value}) => {
// First, we create the tooltip and arrow elements
const tooltip = document.createElement('div')
tooltip.style.position = 'fixed'
tooltip.innerText = value
@ -8,18 +9,30 @@ export default {
arrow.classList.add('tooltip-arrow')
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', () => {
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(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
// 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)
// Now setting all the values
tooltip.style.top = `${top}px`
tooltip.style.left = `${coords.left}px`
tooltip.style.left = `${left}px`
arrow.style.left = `${left + (tooltip.offsetWidth / 2) - (arrow.offsetWidth / 2)}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')
arrow.classList.add('visible')
})
@ -30,6 +43,7 @@ export default {
})
},
unbind: el => {
// TODO: find the tooltip we added for that element and remove it from the dom.
console.log('unbind', el)
},
}