Kevin Powell - Community•3mo ago

Does it make sense to use the title attribute for this?

I want to create a tooltip for users so they can better understand what an icon means (see image). Does it make sense to use the title attribute for this or is it lazy? Here's my code:

<div class="icon" title="For sale">
  <svg />
</div>

<div class="icon" title="For sale">
  <svg />
</div>

4 Replies

vinceOP•3mo ago

I was also reading the docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title but it doesn't explicitly mention my use case, which makes me think maybe I shouldn't be using it. But then again, it does say at the top 'The title global attribute contains text representing advisory information related to the element it belongs to.', which is what I'm using it for too.

ἔρως•3mo ago

yes, it makes sense but i think you can also use the aria-label but seriously, use the title attribute in this instance and either make something better with css popovers or javascript, or use the default tooltip but keep in mind that mobile users won't see the text

vinceOP•3mo ago

Awesome, thank you again Epic! And yup, understood on the mobile part. Might just include some text or something at the bottom of the card. Unfortunately designer didn't think about this haha

ἔρως•3mo ago

well, designers usually are more worried about making it pretty you can show the text just for mobile

Gaming

Programming

Does it make sense to use the title attribute for this?