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/e79ddba2-925c-4bf5-b06c-a8aac4d30b7dn%40googlegroups.com.
