title attribute | tooltips
Hey, I’m aware that if you add the
title attribute to an element it adds a tooltip with that text on hover. What is the reason you may want to add this?
Thanks in advance13 Replies
Accessibility
and usability too
some things need a title
for example, the <abbr> tag is useless without the title
and some elements in an ui are hard/impossible to reason without a title too
for example, if i add a 🔺 icon, wtf does it mean?
with the title, you can say if it is to move up, upvote something or to do something else
Ah okay I see. So in terms of icons, what’s the difference between that attribute and the svg title tag? They seem to be the same?
good question
i have no idea
Generally svg is it's own thing entirely
On mdn it’s called ‘the accessible title tag’ or something like that, and it provides a tooltip and is read out by screen readers, so I assume it’s just the same thing for svgs?
But that doesn’t make sense to have a duplicate thing?
you can have the svg inline or in a separate file, open by a different program
maybe it makes sense ghere?
there
yeah could be something like that
perhaps it's worth using instead of the attributes in some cases for svgs since it's built in almost
yeah, but it wont work when loaded as an <img>, right?
no it won't work if you do that, so the attribute would be good in that case i assume
i'm confused as to why people use svgs in img tags tbh, it removes a lot of the best functionality of them
well, you no longer have to worry about the svg code being in your html
and it still scales
you can also do other things, like, load a small png when the bigger svg isnt needed
or even load a webp file, which can be even smaller
for example, you have a complex logo that's 30kb of svg, but on regular 96dpi displays it would just be a 15kb webp transparent file
you can use the webp for that and load the svg for everything else
also, this guarantees that the css inside the svg doesnt affect the document and the css outside doesnt affect the svg
Yeah the swapping images makes sense a lot, you have no control over colours or svg tag styling though unfortunately so I guess that’s a downside
it is a downside, if you need to care about those things