#49 working better position calculation
This commit is contained in:
parent
35ed51d3b2
commit
3a537d7500
1 changed files with 21 additions and 4 deletions
|
@ -23,11 +23,28 @@ export function init() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeTooltipDirection(tooltip) {
|
function changeTooltipDirection(tooltip) {
|
||||||
const DIRECTION_ATTRIBUTE = 'md-direction';
|
// setting direction to right and changing classes to right don´t fix the position so we have to set it manually to the fix values:
|
||||||
|
|
||||||
let directionStr = tooltip.getAttribute(DIRECTION_ATTRIBUTE);
|
// find div which belongs to the tooltip:
|
||||||
|
let div = document.querySelector(`[aria-label="${tooltip.innerText}"]`);
|
||||||
|
if (helper.assigned(div)) {
|
||||||
|
// for completness change the attributes and classes at first
|
||||||
|
tooltip.setAttribute('md-direction', 'right');
|
||||||
|
tooltip.classList.replace('md-origin-top', 'md-origin-right')
|
||||||
|
|
||||||
if (directionStr === 'top') {
|
// getting bounding rect
|
||||||
tooltip.setAttribute(DIRECTION_ATTRIBUTE, 'right');
|
let divBounds = div.getBoundingClientRect();
|
||||||
|
|
||||||
|
console.debug(divBounds) // you´ll need this if they unluckily change their css or anything
|
||||||
|
// set new position
|
||||||
|
tooltip.style.left = `${divBounds.right + 0}px`;
|
||||||
|
tooltip.style.top = `${divBounds.top + 18}px`; // don´t ask why but aligning it to the divs top will place it above the div and 18px seem to be a working offset...
|
||||||
|
|
||||||
|
|
||||||
|
// they also will help debugging if they change something unlucky
|
||||||
|
console.debug(tooltip);
|
||||||
|
console.debug(tooltip.style.left);
|
||||||
|
console.debug(tooltip.style.top);
|
||||||
|
console.debug('---------')
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Add table
Reference in a new issue