Bootstrap 2 tooltip example, W3C compliant javascript code for html5


bootstrap-2-tooltip-example-w3c-compliant-html5

Avatar for Ben Kaminski  

April 25th, 2013

7 comments

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.

Bootstrap has a great javascript feature built-in called “tooltip”. Simply put–it’s a much prettier version of a typical link hover title box and quite frankly, they’re cool! It has rounded corners, fades in and out, and can be placed on the top, bottom, right, or left side of your link or keyword.

I’m going to assume that you already somewhat know JavaScript but as I was implementing this (tooltip) into my site, I ran into validation errors on the W3C Validation Service website. I prefer my sites to be W3C complaint or at least as much so as possible. I am also implementing HTML5 on most of my new builds so validation is a top priority.

Either way (seen below) I was running into validation errors because I was using the “rel” attribute (in my HTML and JavaScript) to trigger the tooltip hover effect.
Here is the JavaScript I was using:

Here is the HTML syntax for the tooltip:

So as you can see in the image below, the JS/HTML attribute “rel” that I am using has a bad value. I experimented with using different id’s other than “tooltip” but that is needed for the JavaScript. That being said, I was on a mission to fix this. I found a TON of tutorials on how to trigger the Twitter Bootstrap Tooltip, all with basically the same process–to use the “rel” attribute (seen above). Don’t get me wrong, using the “rel” attribute works, it just won’t pass W3C validation (at least at the time of this article).

Attribute Value Errors

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:

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:

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.



Leave a Comment

Leave a Comment Below...

Your email address will not be published.

This article currently has 7 comments.

Avatar for Ben Kaminski

ヴィヴィアンウエストウッド

Can I make a suggestion? I feel youve bought something good here. But what should you added a couple links to a web page that backs up what youre saying? Or possibly you would give us one thing to take a look at, one thing that may connect what youre saying to something tangible? Only a suggestion. Anyway, in my language, there arent a lot good source like this.

this is how i used it, but it’s not working anyway
hover over me

$(function () {
$(“[data-toggle=’tooltip’]”).tooltip();
});

That was easy. Thanks for this simple, straightforward example and explanation.

Im glad it worked for you… happy to see others paying attention to W3C validation and the importance of it.

Best of luck fab23

will add this work around on my w3c compliant bootstrap fork 🙂
thanks for posting, really useful.
cheers

Related: , , , , , , , , , , , , , , , ,

Footer Meta:


Copyright © 2009 - 2017 benkaminski.com