title attribute | tooltips

Hey, I’m aware that if you add the

title

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

Jochem•11/22/24, 1:10 PM

Accessibility

Ἔ

ἔρως•11/22/24, 1:20 PM

and usability too

Ἔ

ἔρως•11/22/24, 1:20 PM

some things need a title

Ἔ

ἔρως•11/22/24, 1:20 PM

for example, the <abbr> tag is useless without the title

Ἔ

ἔρως•11/22/24, 1:21 PM

and some elements in an ui are hard/impossible to reason without a title too

Ἔ

ἔρως•11/22/24, 1:21 PM

for example, if i add a

icon, wtf does it mean?

Ἔ

ἔρως•11/22/24, 1:22 PM

with the title, you can say if it is to move up, upvote something or to do something else

snxxwyyOP•11/22/24, 2:29 PM

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?

Ἔ

ἔρως•11/22/24, 3:14 PM

good question

Ἔ

ἔρως•11/22/24, 3:14 PM

i have no idea

Jochem•11/22/24, 3:15 PM

Generally svg is it's own thing entirely

snxxwyyOP•11/22/24, 3:20 PM

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?

snxxwyyOP•11/22/24, 3:23 PM

But that doesn’t make sense to have a duplicate thing?

Ἔ

ἔρως•11/22/24, 4:19 PM

you can have the svg inline or in a separate file, open by a different program

Ἔ

ἔρως•11/22/24, 4:19 PM

maybe it makes sense ghere?

Ἔ

ἔρως•11/22/24, 4:19 PM

there

snxxwyyOP•11/22/24, 6:33 PM

yeah could be something like that

snxxwyyOP•11/22/24, 6:33 PM

perhaps it's worth using instead of the attributes in some cases for svgs since it's built in almost

Ἔ

ἔρως•11/22/24, 6:36 PM

yeah, but it wont work when loaded as an <img>, right?

snxxwyyOP•11/22/24, 7:12 PM

no it won't work if you do that, so the attribute would be good in that case i assume

snxxwyyOP•11/22/24, 7:13 PM

i'm confused as to why people use svgs in img tags tbh, it removes a lot of the best functionality of them

Ἔ

ἔρως•11/22/24, 7:14 PM

well, you no longer have to worry about the svg code being in your html

Ἔ

ἔρως•11/22/24, 7:15 PM

and it still scales

Ἔ

ἔρως•11/22/24, 7:15 PM

you can also do other things, like, load a small png when the bigger svg isnt needed

Ἔ

ἔρως•11/22/24, 7:15 PM

or even load a webp file, which can be even smaller

Ἔ

ἔρως•11/22/24, 7:17 PM

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

Ἔ

ἔρως•11/22/24, 7:17 PM

you can use the webp for that and load the svg for everything else

Ἔ

ἔρως•11/22/24, 7:17 PM

also, this guarantees that the css inside the svg doesnt affect the document and the css outside doesnt affect the svg

snxxwyyOP•11/22/24, 9:10 PM

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

Ἔ

ἔρως•11/22/24, 9:13 PM

it is a downside, if you need to care about those things