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
I’m pretty sure you can do that with the following as a guide: Tryit Editor v3.7
Instead of a span of text, an image of that class should do the trick.
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 “The Island - Official ARK: Survival Evolved Wiki”, 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?
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:
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; 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; }The Island{{Motovun Jack.jpg}}
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]]
Now it´s working as I wanted it, thank you very much!
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 …
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?
.tooltip .tooltiptext {
visibility: hidden;
width:300px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
That´s what I wrote, I already tried that, but it doesn´t change anything. The size of the tooltip is always the same…
I played a little bit with the lines you sent me.
Now I have the following line:
The Island[img width=32 class=“tc-image” [The Island.jpg]]
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?
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.
.tooltip { position: relative; display: inline; 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; }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…
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
Oh yeah, I forgot to ask: what version of TiddlyWiki are you using?
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?
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.
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.
So far everything is working.
Thanks for your help!
“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 !!