Hi Tones and PMario For once you guys are both wrong.
Tones: If you go to the link you provided, and do the Run snippet, you will see it also has two tooltips. The one they generated comes up instantly, and the default one lags behind by a second. I also tried with <a href...> and it does the same thing. PMario: I am not sure you read my post carefully. The tooltip is what I want, not the link. I am just using the link widget because it has a tooltip and is inline. Not sure why you would suggest removing it. I found this solution which works great. https://www.w3docs.com/snippets/css/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag.html On Sunday, August 8, 2021 at 9:42:37 PM UTC-4 TW Tones wrote: > The html title attribute can be used for tooltips > > <p><abbr title="World Health Organization">WHO</abbr> was founded in > 1948.</p> > <p title="Free Web tutorials">W3Schools.com</p> > > Knowing this I found How to change the style of the title attribute > inside an anchor tag? > <https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag> > The title attribute is a Global attribute > <https://www.w3schools.com/tags/att_title.asp> > > Stylesheet > a { > position: relative; > display: inline-block; > margin-top: 20px; > } > > a[title]:hover::after { > content: attr(title); > color: red; > position: absolute; > top: -100%; > left: 0; > } > > Other tiddler > <a href="http://www.google.com/"; title="Hello world!"> Hover over me </a> > > Which suggests that there is no styling outside your control. > > Now all you need to do do is get your css selector to target the div span > or other element to handle your link or use the href instead. Or target the > CSAS classes used in the link widget. > > Regards > Tones > On Monday, 9 August 2021 at 00:24:57 UTC+10 David Gifford wrote: > >> Thanks Jeremy and flanc... >> >> 1. This is for me, so in this case I am not worried about other users >> with touchscreens, or compatibility. >> >> 2. Let me go about this another way, then. First, here is the styling I >> did to create the custom tooltip: >> >> a[title]:hover::after { content: attr(title); position: relative; top: >> -5px; left: 10px; width:450px; >> color:#000;background-color:#eee;padding:5px;padding-right:10px; } >> >> 3. The above looks great, but then moments later the 'normal' TiddlyWiki >> tooltip shows up. Is there any way to hide it? Or delay it so long it won't >> interfere? >> >> >> >> On Sunday, August 8, 2021 at 9:59:30 AM UTC-4 Jeremy Ruston wrote: >> >>> Hi Dave, >>> >>> Sadly, browsers do not allow web pages to apply styles to tooltips. >>> >>> It is possible to create fake tooltips in CSS and JavaScript that can be >>> styled, but these approaches compromise accessibility and compatibility. >>> >>> Another point to bear in mind is that there's no guarantee that all >>> users will be able to see tooltips because they are not compatible with >>> touch screens. >>> >>> Best wishes >>> >>> Jeremy. >>> >>> -- >>> Jeremy Ruston >>> [email protected] >>> https://jermolene.com >>> >>> On 8 Aug 2021, at 14:43, David Gifford <[email protected]> wrote: >>> >>> >>> >>> >>> Hi everyone >>> >>> I would like to style the tooltip that comes up when hovering over a >>> link. >>> >>> I tried a snippet I found online for regular tooltips, but that created >>> a second tooltip, so both appear near each other. I would just like to >>> style the one for TiddlyWiki links created with the link widget below. I >>> want to use it to display short inline hidden notes. >>> >>> <$link to="." tooltip="this is the tooltip">**</$link> >>> >>> Anyone know the CSS for TW tooltips? I skimmed vanilla base but did not >>> find anything. >>> >>> Thanks in advance, Dave >>> >>> >>> -- >>> 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/f0190c56-7eac-4d4a-9033-81a1059e6ea0n%40googlegroups.com >>> >>> <https://groups.google.com/d/msgid/tiddlywiki/f0190c56-7eac-4d4a-9033-81a1059e6ea0n%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >>> -- 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/e565b64f-be0f-47a3-b4c5-a2e76bc9f228n%40googlegroups.com.
