What is the simplest way to have the below JS code into a Tiddlywiki
plugin! It is not a macro, nor a widget!
var ktooltips = document.querySelectorAll(".ktooltip");
ktooltips.forEach(function(ktooltip, index){ // For each
ktooltip
ktooltip.addEventListener("mouseover", position_tooltip); // On hover,
launch the function below
})
function position_tooltip(){
// Get .ktooltiptext sibling
var tooltip = this.parentNode.querySelector(".ktooltiptext");
// Get calculated ktooltip coordinates and size
var ktooltip_rect = this.getBoundingClientRect();
var tipX = ktooltip_rect.width + 5; // 5px on the right of the ktooltip
var tipY = -40; // 40px on the top of the ktooltip
// Position tooltip
tooltip.style.top = tipY + 'px';
tooltip.style.left = tipX + 'px';
// Get calculated tooltip coordinates and size
var tooltip_rect = tooltip.getBoundingClientRect();
// Corrections if out of window
if ((tooltip_rect.x + tooltip_rect.width) > window.innerWidth) // Out on
the right
tipX = -tooltip_rect.width - 5; // Simulate a "right: tipX" position
if (tooltip_rect.y < 0) // Out on the top
tipY = tipY - tooltip_rect.y; // Align on the top
// Apply corrected position
tooltip.style.top = tipY + 'px';
tooltip.style.left = tipX + 'px';
}
This is a partial solution for repositioning the tooltips to prevent screen
overflow (off screen issue)!
Best wishes
Mohammad
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/CAAV1gMCq94yaA0cb1oBkC-0Oi6xehw78L261%3D%2BmjqBRh7uhbvg%40mail.gmail.com.
