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/68859350-648b-4097-80b2-f423e186b993n%40googlegroups.com.
