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 advance
13 Replies
Jochem
Jochem4w ago
Accessibility
ἔρως
ἔρως4w ago
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
snxxwyy
snxxwyyOP4w ago
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?
ἔρως
ἔρως3w ago
good question i have no idea
Jochem
Jochem3w ago
Generally svg is it's own thing entirely
snxxwyy
snxxwyyOP3w ago
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?
ἔρως
ἔρως3w ago
you can have the svg inline or in a separate file, open by a different program maybe it makes sense ghere? there
snxxwyy
snxxwyyOP3w ago
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
ἔρως
ἔρως3w ago
yeah, but it wont work when loaded as an <img>, right?
snxxwyy
snxxwyyOP3w ago
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
ἔρως
ἔρως3w ago
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
snxxwyy
snxxwyyOP3w ago
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
ἔρως
ἔρως3w ago
it is a downside, if you need to care about those things
Want results from more Discord servers?
Add your server