DEV Community

Discussion on: My WebDev Notes: How to create a tooltip with HTML and CSS

Collapse
 
leanderd profile image
Leander Dirkse

Nice post! One question though: is there a specific reason you didn't use an attribute with the tooltip text and attr to grab that text for the content?

Collapse
 
ziizium profile image
Habdul Hazeez

I never thought of that 🙃.

If you have the time to provide the code for that, I'll really appreciate it, afterwards, I'll update the post with your comment.

Collapse
 
leanderd profile image
Leander Dirkse

I will send you an example in a bit!

Collapse
 
leanderd profile image
Leander Dirkse

Here is an example: jsfiddle.net/xt8zvapc/

I tried to keep it the same as yours as much as possible.

Thread Thread
 
ziizium profile image
Habdul Hazeez

Hello, good day to you, and thanks for your patience.

Your technique worked, but it did not pass W3 markup validation service because you used a tooltip attribute in your HTML which works but not allowed at the time of writing (see the image below).

W3 validation error for tooltip attribute

I changed the tooltip attribute to data-tooltip in the HTML, and it passed the validation test because data attributes are allowed on an element like div.

If you can find time, kindly update the fiddle using data-tooltip in your HTML, and update the CSS accordingly.

Let me know when you are done, I'll update the post as soon as possible.

Once again, thanks for your contribution and patience (I still can't believe it's over a month 😱).