Tooltips, Infotips and Tiddlywiki: handling of position and issue with off screen flow

[Mohammad Rahmani]

Is there any good tool for using tooltip and infotip in Tiddlywiki!

It seems popper is among the common tools but  I cannot find any Tiddlywiki integration!

url: https://github.com/popperjs/popper-core

I use ballon.css and it is great in Tiddlywiki, but it cannot handle tooltip in responsive mode and when tooltip goes offscreen.

What do you propose for better handling of tooltip in Tiddlywiki (also on mobile browser)?

Is there any plugin, tools for using popper.js in tiddlywiki? If not, it possible to integrate poppers?

Best wishes

Mohammad

[PMario]

On Thursday, April 15, 2021 at 1:13:08 PM UTC+2 Mohammad wrote:

Is there any good tool for using tooltip and infotip in Tiddlywiki!

It seems popper is among the common tools but  I cannot find any Tiddlywiki integration!

url: https://github.com/popperjs/popper-core

Hi,

There is no TW integration.

It is 20kByte of minified javascript code, just to create a tooltip? I personally don't want to carry this as a dependency in the core.

It may be a 3rd-party plugin.

If you would describe the problems you have with the TW tooltips in more detail, we may be able to fix this.

-m

[Mohammad Rahmani]

Hi Mario,

The issue with tooltip in TW is

When tooltips are used at the edge of the screen, they go off screen simply. As TW has a responsive layout one cannot determine where a text with tooltip will appear!

The problem is more when you use this with mobile browser (e.g Chrome on Android)

One use case for me is the Refnotes plugin where it uses tooltips/infotips for notes, citations, etc.

I did some googling and I see JS code needs to detect the position of the element with tooltip and then decide how to display the tooltip preventing off screen overflow.

I saw popper.js is common!

I also found a very small solution here https://medium.com/carwow-product-engineering/building-a-simple-tooltip-component-that-never-goes-off-screen-c7039dcab5f9

but I did not know how to use it with TW.

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/8ca93a54-86af-4193-be30-cfb2a2db89d1n%40googlegroups.com.

[Joshua Fontany]

Hi guys,

There is code in the Mentat plugin (the virtual desktop conversion), which hacks the core to handle popups going offscreen. The author even has notes in his plugin about possibly merging it into the core. This would very much be worth doing, in my opinion.

https://thesherwood.github.io/Mentat/

Repopup

• A quick hack of a plugin that attempts to reposition tiddlywiki popups so that they don't run off the screen. It's not perfect and it doesn't seem to do much to normal dropdowns. But it's an okay fix until the popup mechanism can get a comprehensive overhaul. This plugin has been designed with the Volant, Engine, and Mentat Plugins in mind. So if you use it for something else, your mileage may vary.

https://github.com/theSherwood/Mentat

https://github.com/theSherwood/Mentat/blob/master/src/tiddlers/system/plugins/admls/repopup/startup/repopup.js

I hope to wrap up my server experiments soon, and come back to this. Let me know if this is useful.

Best,
Joshua Fontany

[Mohammad Rahmani]

On Fri, Apr 16, 2021 at 2:52 AM Joshua Fontany <joshua....@gmail.com> wrote:

Hi guys,

Hi Joshua

There is code in the Mentat plugin (the virtual desktop conversion), which hacks the core to handle popups going offscreen. The author even has notes in his plugin about possibly merging it into the core. This would very much be worth doing, in my opinion.

https://thesherwood.github.io/Mentat/

Repopup

• A quick hack of a plugin that attempts to reposition tiddlywiki popups so that they don't run off the screen. It's not perfect and it doesn't seem to do much to normal dropdowns. But it's an okay fix until the popup mechanism can get a comprehensive overhaul. This plugin has been designed with the Volant, Engine, and Mentat Plugins in mind. So if you use it for something else, your mileage may vary.

https://github.com/theSherwood/Mentat

https://github.com/theSherwood/Mentat/blob/master/src/tiddlers/system/plugins/admls/repopup/startup/repopup.js

Many thanks for this. I remembered in the past there was some discussion on popups, but I forgot about Mentat and Volant!

 I will go through it to see how I can use it.

Thank you again!

 

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/377d355e-97bb-47b0-862f-3c3a6d028d7bn%40googlegroups.com.

[Ste]

Wow, mentat completely passed me by!  That's amazing.  I can't believe it's tiddlywiki!

[TW Tones]

Ste,

I expect that "I can't believe it's tiddlywiki!" is so common we should promote this phrase, along with "You can do that in TiddlyWiki".

Tones

[Mohammad Rahmani]

Hi TT,

 I will file this issue on GitHub. I hope Jeremy has a look and gives us some direction and hopefully addresses this in the 5.1.24.

Right now both reveal widget and tooltip have problem with correc positioning!

Best wishes

Mohammad

On Fri, Apr 16, 2021 at 4:01 PM TiddlyTweeter <Tiddly...@assays.tv> wrote:

Ciao Mohammad

The OFFSCREEN issue I think most apparent and disruptive with tag dropdowns.

Tags are absolutely brilliant for making quick menus, but on right they don't float back in Vanilla ...

It is relevant in the sense that adaptive markup is not so easy to achieve.

In terms of the OP, far better the base CSS is corrected than adding on yet more plugins.

My 2 cents

TT

--
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/79457a60-6016-408a-a24f-c350a74ace10n%40googlegroups.com.

[Mohammad Rahmani]

TT,

 I noted Mario has file this issue, see https://github.com/Jermolene/TiddlyWiki5/issues/4531#issuecomment-821116470

 I appreciate other users who interested in this topic and have  solution take a look at https://github.com/Jermolene/TiddlyWiki5/issues/4531#issuecomment-821116470 and contribute!

Best wishes

Mohammad

On Fri, Apr 16, 2021 at 4:01 PM TiddlyTweeter <Tiddly...@assays.tv> wrote:

Ciao Mohammad

The OFFSCREEN issue I think most apparent and disruptive with tag dropdowns.

Tags are absolutely brilliant for making quick menus, but on right they don't float back in Vanilla ...

It is relevant in the sense that adaptive markup is not so easy to achieve.

In terms of the OP, far better the base CSS is corrected than adding on yet more plugins.

My 2 cents

TT

--

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/79457a60-6016-408a-a24f-c350a74ace10n%40googlegroups.com.