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

Fix usage with bigger tooltips

This commit is contained in:
kolaente 2020-11-02 23:12:22 +01:00
parent 5b1a590d7c
commit 278d9d5c0a
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/directives/tooltip.js
View File

@ -1,24 +1,35 @@
export default {
inserted: (el, {value}) => {
const tooltip = document.createElement('div')
tooltip.style.position = 'absolute'
tooltip.style.position = 'fixed'
tooltip.innerText = value
tooltip.classList.add('tooltip')
const arrow = document.createElement('div')
arrow.classList.add('tooltip-arrow')
arrow.style.position = 'absoulte'
arrow.style.position = 'fixed'
el.addEventListener('mouseover', () => {
const coords = el.getBoundingClientRect()
const top = coords.top - el.offsetHeight - 12
document.body.appendChild(tooltip)
const top = coords.top - tooltip.offsetHeight - 5
const left = coords.left - (tooltip.offsetWidth / 2) + (el.offsetWidth / 2)
tooltip.style.top = `${top}px`
tooltip.style.left = `${coords.left}px`
document.body.appendChild(tooltip)
const left = coords.left - (tooltip.offsetWidth / 2) + (el.offsetWidth / 2)
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)
tooltip.classList.add('visible')
arrow.classList.add('visible')
})
el.addEventListener('mouseout', () => {
tooltip.classList.remove('visible')
arrow.classList.remove('visible')
})
},
unbind: el => {
console.log('unbind', el)
},
}

19
src/styles/components/base/tooltip.scss
View File

@ -7,17 +7,30 @@
color: white;
border-radius: 5px;
padding: 5px 10px 5px;
opacity: 0;
transition: opacity $transition;
// If the tooltip is multiline, it would make the height calculations needed to properly position it a lot harder.
white-space: nowrap;
overflow: hidden;
&-arrow {
opacity: 0;
content: '';
display: block;
position: absolute;
transition: opacity $transition;
z-index: 10000;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid $dark;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid $dark;
}
&.visible, &-arrow.visible {
opacity: 1;
}
&[x-placement^="top"] {