MediaWiki:Common.js: Difference between revisions
From LOTR-TCG Wiki
(Hopefully fixing tooltip images from shrinking instead of adjusting their position when too close to the bottom/right) |
No edit summary |
||
| Line 9: | Line 9: | ||
var tooltip_rect = tooltips[i].getBoundingClientRect(); | var tooltip_rect = tooltips[i].getBoundingClientRect(); | ||
console.log(tooltip_rect); | |||
if ((tooltip_rect.x + tooltip_rect.width) > window.innerWidth) // Out on the right | if ((tooltip_rect.x + tooltip_rect.width) > window.innerWidth) // Out on the right | ||
| Line 15: | Line 17: | ||
y = -tooltip_rect.height - 5 // Align on the top | y = -tooltip_rect.height - 5 // Align on the top | ||
console.log("X: " + x); | |||
console.log("Y: " + y); | |||
tooltips[i].style.top = y + 'px'; | tooltips[i].style.top = y + 'px'; | ||
tooltips[i].style.left = x + 'px'; | tooltips[i].style.left = x + 'px'; | ||
} | } | ||
}; | }; | ||
Revision as of 20:10, 28 September 2021
/* Any JavaScript here will be loaded for all users on every page load. */
var tooltips = document.querySelectorAll('.tooltip span');
window.onmousemove = function (e) {
var xoffset = (e.clientX + 20),
yoffset = (e.clientY + 20);
for (var i = 0; i < tooltips.length; i++) {
var x = xoffset, y = yoffset;
var tooltip_rect = tooltips[i].getBoundingClientRect();
console.log(tooltip_rect);
if ((tooltip_rect.x + tooltip_rect.width) > window.innerWidth) // Out on the right
x = -tooltip_rect.width - 5; // Simulate a "right: tipX" position
if ((tooltip_rect.y + tooltip_rect.height) > window.innerHeight) // Out on the bottom
y = -tooltip_rect.height - 5 // Align on the top
console.log("X: " + x);
console.log("Y: " + y);
tooltips[i].style.top = y + 'px';
tooltips[i].style.left = x + 'px';
}
};