Show image as a tooltip

heusmich

unread,

Jan 9, 2022, 3:58:01 PM1/9/22

to TiddlyWiki

Hi @all,

I know the I can show text as a tooltip for an image and I know how to do it.

But now I´m wondering if it´s also possible to show an image as a tooltip.

In some of my documents I have links to different internet pages and now - if possible - I want to show a picture when I hover with my mouse over the link.

Does anybody know if this is possible somehow?

Best regards

heusmich

Charlie Veniot

unread,

Jan 9, 2022, 4:56:51 PM1/9/22

to TiddlyWiki

I'm pretty sure you can do that with the following as a guide: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

Instead of a span of text, an image of that class should do the trick.

heusmich

unread,

Jan 9, 2022, 5:28:26 PM1/9/22

to TiddlyWiki

OK, in general this is working. I tried it and I can add an image that I uploaded to my TiddlyWiki before and it will be shown as the tooltip.

But I don´t know how I can use this in my case.

Problem is, I have a table with a few rows and columns.

In one cell of this table for example I have the following content:

| [[The Island|https://ark.fandom.com/wiki/The_Island]] |

This creates a link with the name "The Island" and the target address is "https://ark.fandom.com/wiki/The_Island", but only the name "The Island" is shown in the cell.

So now I want to show a map of "The Island" as a tooltip when I hover over the name "The Island".

I don´t know how I have to write the code and how I add it to the table to make this working...

Can you tell me, what exactly I have to do?

Charlie Veniot

unread,

Jan 9, 2022, 6:17:05 PM1/9/22

to TiddlyWiki

I'm pretty sure you're going to need to forget about using WikiText for that kind of link to the external website.

Go to tiddlywiki.com, and put the following in a tiddler:

For your own TiddyWiki, if you only need the styling for the one tiddler, you might as well put all of the style stuff at the start of that one tiddler. If you need this kind of thing in more than one tiddler, then you'll want to put the stuff between the style tags in a stylesheet tiddler.

That last line, the link line, is what you need instead of [[The Island|https://ark.fandom.com/wiki/The_Island]]

heusmich

unread,

Jan 9, 2022, 6:21:50 PM1/9/22

to TiddlyWiki

Now it´s working as I wanted it, thank you very much!

:D

Charlie Veniot

unread,

Jan 9, 2022, 6:38:39 PM1/9/22

to TiddlyWiki

That's good stuff !

I've never done that before, so thanks for patiently bearing with me !

Very neat way not just to setup links but to view anything on hover over something.

BTW, instead of {{Motovun Jack.jpg}}, you could use the TiddlyWiki image widget to size the tooltip image juuuuust right. I think ...

heusmich

unread,

Jan 9, 2022, 7:05:17 PM1/9/22

to TiddlyWiki

OK, I still have a problem with the size of the images. I only need it for one tiddler.

I put the content above between the style tags at the beginning of the tiddler and changed the width from 120px to 1024px, but it doesn´t change anything.

The size of the image is always the same. Do you still have an idea how I can change the size?

Charlie Veniot

unread,

Jan 9, 2022, 7:24:00 PM1/9/22

to TiddlyWiki

.tooltip .tooltiptext {
visibility: hidden;
width:300px;

background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

heusmich

unread,

Jan 9, 2022, 7:27:06 PM1/9/22

to TiddlyWiki

That´s what I wrote, I already tried that, but it doesn´t change anything. The size of the tooltip is always the same...

heusmich

unread,

Jan 9, 2022, 7:45:33 PM1/9/22

to TiddlyWiki

I played a little bit with the lines you sent me.

Now I have the following line:

<a href="https://ark.fandom.com/wiki/The_Island" target="_blank" class="tooltip">The Island<span class="tooltiptext">[img width=32 class="tc-image" [The Island.jpg]]</span></a>

Now the image is very small, so it could be 32px.

I can increase the size up to ca. 300px but I can´t make it larger. Maybe there is a limitation or anything like that in the tooltip window?

Maybe I can increase the size of the tooltip window?

Charlie Veniot

unread,

Jan 9, 2022, 7:57:14 PM1/9/22

to TiddlyWiki

Both need to be the same number. I have the width in the style set to 500px, and the img link set to 500. I don't have class="tc-image" in my image link.

The following in a tiddler (tiddlywiki.com TiddlyWiki) gives me a nice big image that is 500px wide.

border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;

width:500px;

background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>

<a href="https://ark.fandom.com/wiki/The_Island" target="_blank" class="tooltip">The Island<div class="tooltiptext">[img width=500 [Motovun Jack.jpg]]</div></a>

heusmich

unread,

Jan 9, 2022, 8:06:22 PM1/9/22

to TiddlyWiki

You are right, when I test this on TiddlyWiki.com, I can change the size and it´s working.

But in my wiki it´s not working. I don´t know why.

For example, when I only try this:

[img width=1024px [The Island.jpg]]

I can change the px as I want, the size will also be changed.

So I don´t know why it is not working when I try it with your code...

Charlie Veniot

unread,

Jan 9, 2022, 8:22:28 PM1/9/22

to TiddlyWiki

I don't think TiddlyWiki likes "px" in what you've setup:

Try this:

[img width=1024 [The Island.jpg]]

If that doesn't fix things, we are going to need to tear your TiddlyWiki apart to figure out what's wrong.

Unless there is something about "The Island.jpg" that prevents image resize.

If things work well in tiddlywiki.com, then try what we have working with your image imported into tiddlywiki.com

Charlie Veniot

unread,

Jan 9, 2022, 8:23:09 PM1/9/22

to TiddlyWiki

Oh yeah, I forgot to ask: what version of TiddlyWiki are you using?

heusmich

unread,

Jan 10, 2022, 3:33:24 AM1/10/22

to TiddlyWiki

Hi,

sorry for my late response, but I had to go to bed because of work.

My version is 5.2.1, so the latest one. A few days ago I updated it to this version.

I now downloaded a completely new file "empty.html" from tiddlywiki.com and tried it, in this new file the code from you is working.

So it seems that it has something to do with my TiddlyWiki.

Do you have an idea what it can be or what I have to check?

heusmich

unread,

Jan 10, 2022, 4:33:21 AM1/10/22

to TiddlyWiki

OK, I don´t know why but now your code is working.

So now I will check it for the other links in my tiddler and if there will be some more questions, I will come back to you.

Thanks for your help so far.

Charlie Veniot

unread,

Jan 10, 2022, 10:25:42 AM1/10/22

to TiddlyWiki

And I am must getting up.

If you have any stylesheet tiddlers, I'd check and see if there is any conflict with this new CSS we are playing with.

Also, if you do have any stylesheet tiddlers that you've created, check to make sure you don't have any missing closing curly brackets, i.e. "}". A missing closing curly bracket will immediately end sequential processing of all stylesheets from that point.

Next: conflict with any missing plugins?

Next: any chance that you or a plugin has somehow altered the tc-image class such that it can't be resized? (I'm reaching.)

I can't think of anything else at the moment. Gotta get some serious caffeine into me. Well, after I ride Algea for 15 minutes (my stationary bike). And then scrub an armpit or two ... Yeah, it's a process.

heusmich

unread,

Jan 12, 2022, 4:14:16 PM1/12/22

to TiddlyWiki

So far everything is working.

Thanks for your help! :D

Charlie Veniot

unread,

Jan 12, 2022, 5:23:35 PM1/12/22

to TiddlyWiki

"And I am must getting up?" Um: just. Probably not as up as I thought myself to be ...

Good stuff! I am a huge fan of things working.

Rock'n roll !!

On Wednesday, January 12, 2022 at 5:14:16 PM UTC-4 heusmich wrote:

So far everything is working.
Thanks for your help! :D

Reply all

Reply to author

Forward