Hi Mohammad, How do you test your code? On a small device? Portrait mode? Or ... ?
On Saturday, April 17, 2021 at 10:48:00 AM UTC-7 Mohammad wrote: > 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 <brian....@gmail.com> 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 < >> tiddl...@googlegroups.com> 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 tiddlywiki+...@googlegroups.com. >>> 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 tiddlywiki+...@googlegroups.com. >> > 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 tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/232a93bd-a308-4fb6-b941-e096281462f9n%40googlegroups.com.
