CSS for tooltips in TiddlyWiki?

[David Gifford]

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

[Jeremy Ruston]

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

jer...@jermolene.com

https://jermolene.com

On 8 Aug 2021, at 14:43, David Gifford <dgif...@crcna.org> wrote:



--
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 tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f0190c56-7eac-4d4a-9033-81a1059e6ea0n%40googlegroups.com.

[Finn Lancaster]

Dave: 

On the lines of what Jeremy was saying, the Hint CSS Library is a great resource for customizable tool tips. (https://kushagra.dev/lab/hint/). 

Looking at the website, it seems relatively easy to use, and definitely applicable to TW, although I have never had need to use the library before. 

If you decide to use it, let me know how it goes; maybe I will test it in a TW/HTML project, too! 

Regards. 

     Finn Lancaster

     www.finnsoftware.net 

     www.GitHub.com/flancast90

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/E9BD516D-EFFE-4FA1-A34D-4E13D992BD2F%40gmail.com.

[David Gifford]

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?

[TW Tones]

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?

The title attribute is a Global attribute

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

[PMario]

On Sunday, August 8, 2021 at 4:24:57 PM UTC+2 David Gifford wrote:

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?

Hi

Remove the "tooltip" parameter from the widget you use. That should do it.

-m

[David Gifford]

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

[Eric Shulman]

On Sunday, August 8, 2021 at 6:42:37 PM UTC-7 TW Tones wrote:

Knowing this I found How to change the style of the title attribute inside an anchor tag?

The title attribute is a Global attribute

That's a really neat bit of tech!  Here's a slightly fancier version that works for any text (not just links).

It also bypasses the default tooltip display, adds a bit more styling, and gets the tip content from another tiddler!

In a tiddler tagged with $:/tags/Stylesheet:

.customtip { position: relative; }

.customtip:hover::after {

   content: attr(mytip);

   position: absolute; top: 100%; left: 50%;

   white-space:nowrap; color:black; background:ivory;

   padding:0 1em; border:1px solid black; border-radius:0.5em;

}

Then, in a test tiddler:

text before

<span class="customtip" mytip={{myTipText}}> Hover over me </span>

text after

And, in a separate tiddler, put some custom tip content:

TiddlyWiki is magic!

Notes:

* Instead of using an "A" (link) element, I used a <span> with a classname of "customtip"

* The .customtip class doesn't need display:inline-block or margin-top:20px

* The CSS for ".customtip:hover::after" references a custom attribute name, "mytip"

* The test defines the customtip span with an attribute named "mytip" that transcludes content from the "myTipText" tiddler

enjoy,

-e

[TW Tones]

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 ;)

[David Gifford]

@Eric - I will try that out! Thanks!

@Tones - ah, now I understand your earlier post better. Thanks for clarifying that!

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 tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1459033c-d7d2-4828-920c-bff466961867n%40googlegroups.com.