Interested in classless tooltips?

[TimDaub]

Hey, my project https://rugpullindex.com has been using your classless library since a while now. I like it. But now I need tooltips, so I thought I add them using css attributes. See gif below.

Are you interested in this functionality? If so I can send a PR.

[basteyy]

I suggest to use abbr insteadt of a span tag for that. And what about mobile? Did you have something like:

abbr[title]:after {content: " (" attr(title) ") "}

@media (min-width:1160px) {
   abbr[title] {border-bottom: 1px dotted }
   abbr[title]:after {content: "" }
}

[TimDaub]

I suggest to use abbr insteadt of a span tag for that

As you can see in #9, I decoupled the usage from the parent element. abbr should hence "just work".

And what about mobile?

What is the library's philosophy on this? I can see two options:

• ignore mobile as :hover doesn't exist
• allow mobile users to touch using :active pseudo element

Other options? What's the preference? FYI: On my mobile browser (Brave), <abbr> is not working.

Edit: I think limiting to abbr makes sense. I'll make some more changes

[TimDaub]

@basteyy: Check out 83f3c4f. I now use <abbr> but also note how I'm not using the title attribute. Why?

• Apparently the <abbr> tooltip cannot be silenced using css
• Overwriting title with custom functionality could lead to problems for users of <abbr> and classlessde

Hence, I've introduced an extra tooltip that can be enabled by defining data-position and data-title on <abbr>.

I also added :active to the :hover section. Holding down on the <abbr> element, should now also display the tooltip.

[basteyy]

I like it ;)

To the mobile: In my opinion it should be displayed directly (like I pointed it out with my example). Even you have :active you cannot expect from the user, to focus/touch more or less stateless elements.

[TimDaub]

In my opinion it should be displayed directly (like I pointed it out with my example).

Basically, in your example the text is dumped into the DOM and no interaction is necessary, right?

I understand your motivation, which is that we can't expect touch users to focus/touch on an element. However, I've never seen the solution you're proposing in action. Can you maybe give popular examples of this?

[emareg]

Thank you for the PR, I really like the idea of tooltips. However, why is the default title attribute of the <abbr> tag not enough? You cannot influence the style but the browser takes care of displaying it correctly. Using custom tooltips adds extra code and you risk that part of the text is not readable due to overflows. Since the title tooltip is not enabled on mobile devices, it would make sense to use the solution with :active/:hover there. I always try to keep the code minimal, so what about

abbr[title] { position: relative; text-decoration: underline dotted; cursor: help; }
@media (max-width:1024px) {
	abbr[title]:hover::before,
	abbr[title]:focus::before {
		position: absolute;
		bottom: 2em;
		width: 10em;
		padding: .5em .7em;
		color: var(--cbg);
		background-color: var(--cfg);
		box-shadow: .1rem .1rem .4rem 0 var(--cfg);
		content: attr(title);
		white-space: normal;
	}
}

without the extra code for different positions?

[TimDaub]

However, why is the default title attribute of the <abbr> tag not enough?

I design websites since 10 years and I've never understood <abbr> and its default tooltip as a reasonable signifier for additional information on a website. Surely, others will have made different experiences. My experience is, however, confirmed by other web developers as many other frameworks include custom tooltips too and don't rely on <abbr>.

Finally, I'm not using <abbr> for what it's supposed to be: an abbreviation (as in abbr. short for "abbreviation"). Instead, my practical use for tooltips is to give users additional information about an element on my page. I've already implemented the tooltips on my website: https://rugpullindex.com/ If you go there and you hover over "Rating", you see that it's explaining what "Rating" means and it doesn't define any "abbreviation".

Using custom tooltips adds extra code and you risk that part of the text is not readable due to overflows.

True.

I always try to keep the code minimal, so what about

I tried it and I like it. I'm happy to adjust the code in my PR towards this. A minor complaint though: Using the title attribute will cause the native tooltip to show up as well, hence to keep the original <abbr title> functionality intact, I opted for using <abbr data-title>. Are you OK with that?

[basteyy]

However, I've never seen the solution you're proposing in action. Can you maybe give popular examples of this?

Cannot name any popular. So point for you ;)

Actually, tooltips are a fundamental aspect of GUI. Ignoring that would be wrong. But with that statement #8 (comment) in mind and based on my understanding of classlesscss, an implementation as emareg pointed it out would be enough.

Your solution is definitely a wonderful piece of code. But according to my understanding, it does not belong to the classless core. I suggest publish it as a (standalone) module/extension. In that way, it's up to the user to invoke such things in their code.

[TimDaub]

But with that statement #8 (comment) in mind and based on my understanding of classlesscss, an implementation as emareg pointed it out would be enough.

Please see PR #9

classlesscss/docs/classless.css

Lines 404 to 418 in e6827fe

	abbr[data-title] { position: relative; text-decoration: underline dotted; cursor: help; }
	@media (max-width:1024px) {
	abbr[data-title]:hover::before,
	abbr[data-title]:focus::before {
	position: absolute;
	bottom: 2em;
	width: 10em;
	padding: .5em .7em;
	color: var(--cbg);
	background-color: var(--cfg);
	box-shadow: .1rem .1rem .4rem 0 var(--cfg);
	content: attr(data-title);
	white-space: normal;
	}
	}

where I enhance the <abbr> functionality according to the statement of #8 (comment). What is in #9 is what I find useful to merge. I agree that any additional functionality may be an extension.

[basteyy]

Ops, sorry. Did not get your updates in the PR.

After a few more thinking, what do you think about changing the dom-element on more time? Please take a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr

My problem is the data-attribute inside abbr. To make sure that any browser (text2speech) can handle the abbr, it's necessary to add the description two times - as data-title and title. Also, when styles area disabled, the data-title-tag will not be shown. For fixing that, the markup would look like this:

<abbr data-title="foobar" title="foobar">example text</abbr>

What do you think about using dfn?

[emareg]

I think <dfn> would be a good choice for the label. I was also wondering if we could avoid the title attribute and just use e.g. <dd> tag for the tooltip? For now, I could not find a solution using only CSS selectors, with one of the following:

<dd><dfn>Size</dfn>The size is measured in Lines of Code (LOC)</dd>
<dfn>Size</dfn><dd>The size is measured in Lines of Code (LOC)</dd>

But maybe the title attribute makes sense because the tooltip should be hidden when the correct styling is not applied right?