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. heusmich schrieb am Montag, 10. Januar 2022 um 09:33:24 UTC+1: > 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? > > [email protected] schrieb am Montag, 10. Januar 2022 um 02:23:09 UTC+1: > >> Oh yeah, I forgot to ask: what version of TiddlyWiki are you using? >> >> On Sunday, January 9, 2022 at 9:22:28 PM UTC-4 Charlie Veniot wrote: >> >>> 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 >>> On Sunday, January 9, 2022 at 9:06:22 PM UTC-4 heusmich wrote: >>> >>>> 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... >>>> >>>> [email protected] schrieb am Montag, 10. Januar 2022 um 01:57:14 UTC+1: >>>> >>>>> 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. >>>>> >>>>> <style> >>>>> .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; >>>>> } >>>>> </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> >>>>> >>>>> >>>>> >>>>> On Sunday, January 9, 2022 at 8:45:33 PM UTC-4 heusmich wrote: >>>>> >>>>>> 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? >>>>>> heusmich schrieb am Montag, 10. Januar 2022 um 01:27:06 UTC+1: >>>>>> >>>>>>> That´s what I wrote, I already tried that, but it doesn´t change >>>>>>> anything. The size of the tooltip is always the same... >>>>>>> >>>>>>> [email protected] schrieb am Montag, 10. Januar 2022 um 01:24:00 >>>>>>> UTC+1: >>>>>>> >>>>>>>> .tooltip .tooltiptext { >>>>>>>> visibility: hidden; >>>>>>>> *width:300px;* >>>>>>>> background-color: black; >>>>>>>> color: #fff; >>>>>>>> text-align: center; >>>>>>>> border-radius: 6px; >>>>>>>> padding: 5px 0; >>>>>>>> >>>>>>>> On Sunday, January 9, 2022 at 8:05:17 PM UTC-4 heusmich wrote: >>>>>>>> >>>>>>>>> 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? >>>>>>>>> >>>>>>>>> [email protected] schrieb am Montag, 10. Januar 2022 um 00:38:39 >>>>>>>>> UTC+1: >>>>>>>>> >>>>>>>>>> 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 <https://tiddlywiki.com/#ImageWidget> to size the >>>>>>>>>> tooltip image juuuuust right. I think ... >>>>>>>>>> >>>>>>>>>> On Sunday, January 9, 2022 at 7:21:50 PM UTC-4 heusmich wrote: >>>>>>>>>> >>>>>>>>>>> Now it´s working as I wanted it, thank you very much! >>>>>>>>>>> :D >>>>>>>>>>> >>>>>>>>>>> [email protected] schrieb am Montag, 10. Januar 2022 um >>>>>>>>>>> 00:17:05 UTC+1: >>>>>>>>>>> >>>>>>>>>>>> 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: >>>>>>>>>>>> >>>>>>>>>>>> <style> >>>>>>>>>>>> .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; >>>>>>>>>>>> } >>>>>>>>>>>> </style> >>>>>>>>>>>> *<a href="https://ark.fandom.com/wiki/The_Island >>>>>>>>>>>> <https://ark.fandom.com/wiki/The_Island>" target="_blank" >>>>>>>>>>>> class="tooltip">The Island<span class="tooltiptext">{{Motovun >>>>>>>>>>>> Jack.jpg}}</span></a>* >>>>>>>>>>>> >>>>>>>>>>>> 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]] >>>>>>>>>>>> On Sunday, January 9, 2022 at 6:28:26 PM UTC-4 heusmich wrote: >>>>>>>>>>>> >>>>>>>>>>>>> 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? >>>>>>>>>>>>> >>>>>>>>>>>>> [email protected] schrieb am Sonntag, 9. Januar 2022 um >>>>>>>>>>>>> 22:56:51 UTC+1: >>>>>>>>>>>>> >>>>>>>>>>>>>> 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. >>>>>>>>>>>>>> >>>>>>>>>>>>>> On Sunday, January 9, 2022 at 4:58:01 PM UTC-4 heusmich wrote: >>>>>>>>>>>>>> >>>>>>>>>>>>>>> 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 >>>>>>>>>>>>>>> >>>>>>>>>>>>>> -- 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/8ac96db5-71ed-420b-b824-727926d4b282n%40googlegroups.com.
