diff --git a/src/javascript/enhancements/settingsOptimization.js b/src/javascript/enhancements/settingsOptimization.js index 2e2d4ef..509e877 100644 --- a/src/javascript/enhancements/settingsOptimization.js +++ b/src/javascript/enhancements/settingsOptimization.js @@ -23,11 +23,28 @@ export function init() { } 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') { - tooltip.setAttribute(DIRECTION_ATTRIBUTE, 'right'); + // getting bounding rect + 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('---------') } } \ No newline at end of file