If you haven’t already heard about Bootstrap, please familiarize yourself with this great website application. I am still learning the inner workings of Bootstrap (with HTML5) but am very excited about what I have learned so far.
Anyhow, I’m not going to bore you with all of the details of Bootstrap. Its on you to “get your learn on”. Let’s get down to business.
Here is the HTML syntax for the tooltip:
<a href="#" rel="tooltip" title="Hover text here">linked text here</a>
Click to see full size image
Here’s how I solved the problem. I noticed right away that on Bootstraps website (which doesn’t go into too much detail on how to apply things) the syntax they were using was NOT using the “rel” attribute. I thought to myself, these tooltips work on the Bootstrap website and they’re not using “rel” attribute so there MUST be a way.
Here’s the HTML snippet from the Bootstrap website:
<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>
The first thing you should notice is the lack of the “rel” attribute. So this gave me a simple idea and a simple solution. Replace the “rel” attribute with “data-toggle” in the JS and HTML like so:
Then applied it to the HTML markup like so:
<a href="#" data-toggle="tooltip" title="Web Solutions Services">WSS</a>
And guess what… It passed the W3C Validation service! Seems pretty simple right? Give it a try for yourself and let me know if it worked for you. Thanks as always for reading my articles.