David, I am happy to accept being wrong (when I am and no doubt too often) but my reply only intended assertion was, the title which acts as a tooltip can be styled, as a counter claim to "tooltips cannot be styled". Eric has fortunately shown how to defeat TiddlyWiki's own tooltip css to address the duplicate issue.
Perhaps I should have spelled out what I was proving. Regards Tones Post Script: However I am confidently not wrong about a lot of other things Like Human Induced Climate Change ;) On Monday, 9 August 2021 at 21:26:22 UTC+10 David Gifford wrote: > 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/1459033c-d7d2-4828-920c-bff466961867n%40googlegroups.com.
