Question 2. How do you apply .kooltip ? On Saturday, April 17, 2021 at 1:47:57 PM UTC-7 Mark S. wrote:
> 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 <[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/9bab5e37-28f9-4c3c-ba10-2e364d97634cn%40googlegroups.com.
