@Eric - I will try that out! Thanks! @Tones - ah, now I understand your earlier post better. Thanks for clarifying that!
On Mon, Aug 9, 2021 at 8:42 AM TW Tones <[email protected]> wrote: > 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 a topic in the > Google Groups "TiddlyWiki" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/tiddlywiki/pRgLnUDMdjY/unsubscribe. > To unsubscribe from this group and all its topics, 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 > <https://groups.google.com/d/msgid/tiddlywiki/1459033c-d7d2-4828-920c-bff466961867n%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/CANE%3DBFLUD5ZjUWSb4O%3DBXVyVbbR-7hD8xZcarvu898rd_%2BgYVg%40mail.gmail.com.
