Hi Brian, You are right! the code does not work for me and the solution is not based on TW recommendation! So I gave up and will stay to see what Jeremy decides on https://github.com/Jermolene/TiddlyWiki5/issues/4531#issue-591121784
Best wishes Mohammad On Sat, Apr 17, 2021 at 10:01 PM Brian Theado <[email protected]> wrote: > Will all your .tooltip dom elements be static and available when the > rawMarkup script runs? The way you have the code, this will run just once: > > var ktooltips = document.querySelectorAll(".tooltip"); > > > Any new DOM elements which come after will not be picked up automatically. > > If you want to make it dynamic, then it might work to register > a th-page-refreshed hook by calling $tw.hooks.addHook > > Change your main code into a function and register that with the addHook > call. IOW, put this code into a function: > > var ktooltips = document.querySelectorAll(".ktooltip"); > ktooltips.forEach(function(ktooltip, index){ // For each > ktooltip > ktooltip.addEventListener("mouseover", position_tooltip); // On hover, > launch the function below > }) > > > Instead of tagging the tiddler as RawMarkup, you can set the module-type > field to 'startup'. > > One worry I have is that your code will be called on every refresh and the > call to addEventListener will happen on every matching dom element every > time. You should research that method to see if your event listeners will > continually accumulate (i.e. getting added over and over until the dom > element goes away). If that is the case, then you would probably want some > way to avoid adding the listener multiple times. > > I've never used the tw addHook...just sharing in case it helps you. Also, > this solution altogether seems a little "hacky" and not really in line with > the tiddlywiki-way. > > Here is a link to documentation for addHook and startup modules: > > > https://tiddlywiki.com/dev/#StartupMechanism:StartupMechanism%20HookMechanism%20%5B%5BHook%3A%20th-page-refreshed%5D%5D%20HelloThere%20Introduction > > > On Sat, Apr 17, 2021 at 12:20 PM 'Mark S.' via TiddlyWiki < > [email protected]> wrote: > >> You could try putting in it's own tiddler: >> >> tags: $:/tags/RawMarkup >> type: application/javascript >> >> <script> >> .... code ... >> </script> >> >> Note that you have to save and reload before anything happens. I would >> not be surprised if something clashes with TW's rendering system, though. >> >> On Saturday, April 17, 2021 at 7:38:41 AM UTC-7 Mohammad wrote: >> >>> 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/15fb086c-650b-4f3e-affd-84067b7b0632n%40googlegroups.com >> <https://groups.google.com/d/msgid/tiddlywiki/15fb086c-650b-4f3e-affd-84067b7b0632n%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> > -- > 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/CAO5X8Cxf4_5%2BVAf1HHW3J02Rsui1jtFg1X-s3Lj9HSTayBGFRQ%40mail.gmail.com > <https://groups.google.com/d/msgid/tiddlywiki/CAO5X8Cxf4_5%2BVAf1HHW3J02Rsui1jtFg1X-s3Lj9HSTayBGFRQ%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > -- 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/CAAV1gMALFSoAms8jRxLjF9sNh84TdtSggOn%2BCVcQOoNuesEFOg%40mail.gmail.com.
