If not title attribute then what?

I understand that some devices ignore the title attribute. I've seen it over and over and over.
I can't find anything to tell me what to use in its place.

I write SaaS. I don't design websites.
What attribute do I use to inform users (usually for inline help) of the element they're hovering over if I can't count on title?

 

Turns out there's no replacement. What a shock.

I can use CSS:
.element:hover:after {
content:attr(Click here the delete this widget);
}

 

sarahk thanks for responding but I don't understand what you're saying.
Yes, I'm trying to add a tooltip but the title attribute in an element is unreliable for some devices.
The CSS I came up with doesn't really work either.
I think I'll have to write a Javascript function to solve it.

 

sarahk: That will help. I'll try that. Thanks.

 

It's hard to say without seeing your content or code. That's a bit of a "this is why we can't help you".

My question would be WHY do you want title's behavior? What's wrong with the content inside the tag in the first place that warrants its presence?

Remember, the title attribute is basically a fallback for "the content of this tag doesn't describe what it does" in which case your problem is generally NOT that you need title. It's that you need to fix your content!

That's why things like CSS image replacement exists, such as when applying icons for artsy fartsy bullshit reasons, as opposed to putting useful text in there.

You still put the useful text in there, hide it for screen media, use CSS to put the icon in... and if it strikes your fancy slide the text back in as a tooltip on hover/focus using CSS. That way non-screen users get the text they want/need, visual users with psychic powers get the icon, and confused users get the tooltip of that text to explain what the blazes that stupid icon stands for.

I actually showed doing this in the example for my "creating icon webfonts" article.

Article:
https://medium.com/codex/creating-custom-icon-webfonts-478a934c7ddf

Example code, live demo, .rar archive of the project:
https://cutcodedown.com/for_others/medium_articles/fonts/

Is that about what/why you're trying to use title?

 

Oh also "title" does work in all browsers (but not all UA's) if you apply it to the tags that are supposed to have it. ABBR, ACRONYM, and Anchor for example.

Just don't be surprised if it's ignored on elements that cannot receive focus or who's content isn't supposed to have secondary meanings / explanations on them.

It's part and parcel of semantic markup, where your HTML is supposed to be used to say what things are -- structurally, grammatically -- and not what you want things to look like!

That's why HTML/CSS frameworks are such incompetent shit. People who don't know what's wrong with:

class="text-red-400 text-center font-bold col-4-s col-6-m"

Need to admit defeat, do the world a favor, forget CSS exists, and go back to writing HTML 3.2 with all the FONT/CENTER tags, ALIGN/BORDER/BGCOLOR attributes, and TABLE for layout trash everyone seems to so pathetically, desperately, and absurdly miss.

 

Jason thanks for your response .
People who use software apps repeatedly know how to use them - once they've learned.
A big challenge for a software developer is to develop it to be versatile, easy to use and easy to understand/learrn.
So, lots of content is frowned on because it eats up space in the interface.
I use tooltip help to teach or remind users on how to use the interface if they need it.

"applying icons ..." The main reason we use icons is to save space. The trick is to use icons that people understand like:
The title attribute would explain in more detail exactly what the element does or is (which is only needed once or if forgotten).
Most of my buttons use text which does take up a lot of space but it's easier to understand - and as I see here makes it more accessible.
Still I want tooltip help with more detail attached to them if the user needs more information.

After my last conversation with you I determined to make my app more accessible so the title attribute won't work for devices that aren't browsers.
What is wrong with using W3Schools' https://www.w3schools.com/howto/howto_css_tooltip.asp
My objective: If an element is hovered over or if no hover then activated, provide tooltip help if the user wants it.
I'd rather make it optional like a title attribute does.

I skimmed your article but didn't really see where in the article you were creating a tooltip kind of function.

 

The google play button does it. You hover it you get the text that's inside the anchor. It's actually similar to what the W3Fools bloated code does. The difference is I'm generating the icon from a webfont in the stylesheet -- where it belongs -- instead of where they have text.

For example:

<a href="#" class="_icon_youtube"><span>View Tutorial On YouTube</span></a>

If your stylesheet is being applied via media="screen" and not just crapped into the markup any old way, non-screen devices will just get the text, no icon. That covers braille, search, and a few others.

for screen you hide the span off-screen, use generated content to plug in the icon.

Again, see the demo.html
https://cutcodedown.com/for_others/medium_articles/fonts/demo.html

Hover the youtube icon. You get a tooltip that says "youtube"

The code for that being:

<a href="#" class="_icon_youtube"><span>Youtube</span></a>

Code (markup):

@font-face {
	font-family:"icons";
	font-weight:normal;
	font-style:normal;
	src:
		url("fonts/checkicons-Regular.woff2") format("woff2"),
		url("fonts/checkicons-Regular.woff") format("woff");
}

[class^=_icon] {
	position:relative;
	display:inline-block;
	font-family:"icons";
	text-decoration:none;
}

._icon_youtube:before {
	content:"\E002";
	font-size:2rem;
}

[class^=_icon] > span {
	position:absolute;
	left:-999em;
	top:2.5rem;
	padding:0.5rem;
	opacity:0;
	background:#CCC;
	border:0.0625rem solid #000;
	transition:opacity 0.3s, left 0s 0.3s;
}

[class^=_icon]:focus > span,
[class^=_icon]:hover > span {
	left:0;
	opacity:1;
	transition:opacity 0.3s, left 0s;
}

Code (markup):

With the icons in said webfont. To use SVG instead of a font just change the :before to have width and height, and load (or embed) the SVG as a background image.

Naturally this is 2022, to blazes with raster image formats.

*NOTE* for mobile and small screens I often like to show both the icon and the text, since touchscreens don't have hover, so there are no tooltips. Oh noes, I have to make room to show text, the horrors.