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.
