The simplest way to include the JS code into Tiddlywiki

[Mohammad Rahmani]

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

[Mark S.]

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.

[Mohammad Rahmani]

Thank you Mark!

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.

[Brian Theado]

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

--

[Mohammad Rahmani]

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

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CAO5X8Cxf4_5%2BVAf1HHW3J02Rsui1jtFg1X-s3Lj9HSTayBGFRQ%40mail.gmail.com.

[Mark S.]

Hi Mohammad,

How do you test your code? On a small device? Portrait mode? Or ... ?

[Mark S.]

Question 2. How do you apply .kooltip ?

[Mohammad Rahmani]

On Sun, Apr 18, 2021 at 1:18 AM 'Mark S.' via TiddlyWiki <tiddl...@googlegroups.com> wrote:

Hi Mohammad,

How do you test your code? On a small device? Portrait mode? Or ... ?

Hi Mark, 

I used the code on a large screen (laptop)! I attached the three tiddlers show to the JS, CSS and the test!

To examine the code you need to add/remove some text to push the tooltip to the edge of the screen!

[Mark S.]

In that case, thanks to Brian's input, I seem to have gotten it to work, though maybe only once. Here's a screen shot without the code:

and here's a screenshot with the code

I only tested once. For about 3 seconds. I have no idea if it breaks with repeated use, as  Brian suggested.

Good luck!

[Mohammad Rahmani]

Thank you Mark!

I will give a try!

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/280af977-1b60-4b87-a154-27d91a0393b1n%40googlegroups.com.

[Flibbles]

I know I'm a little late to the party here, but I think your first solution may not have worked because it didn't have a module-type. If you have...

module-type: utils

...then tiddlywiki will load this tiddler on startup (and put any existing exports int utils, which will be none). As it is, tiddlywiki won't touch your tiddler. You have it specified as javascript, but tiddlywiki has no reason to believe it should compile it yet.

[Mohammad Rahmani]

Hi Flibless,

 Thank you for your inputs! I actually gave up on this!

Best wishes

Mohammad

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ff334b94-c767-4e99-bbec-aed95407ec4dn%40googlegroups.com.