Something with Tooltips using Bootstrap

Question

well this is for the people that know about Jquery more about me and this is my question:

I'm using bootstrap framework to create my web I've added some tooltips to try these But i've noticed that the code that i'm using doesn't work for 2 or more tooltips

I mean, this is the code of the JS:

<script>
    $(function () {
        $('#tooltips').tooltip();
    });
</script>

And this is the code to call the tooltip:

<a href='#' id='tooltips' data-placement='top' title='this is a tooltip'>

I was sure if i place that code i'll able to use it for 2 or more tooltips, but i can't.

To resume: I want to know why i can't use it for 2 or more tooltips instead of one, cause i don't want to had like 10 lines of JS for 4 tooltips

Answer 1

You can't have the same id value more than once in a page. Use class instead. It's a very common mistake.

<script>
    $(function () {
        $('.tooltips').tooltip();
    });
</script>

<a href='#' class='tooltips' data-placement='top' title='tooltip'>...</a>
<a href='#' class='tooltips' data-placement='top' title='another tooltip'>...</a>
<a href='#' class='tooltips' data-placement='top' title='another tooltip'>...</a>

You should use the HTML Validation Service to check your page before trying to debug javascript or css. Make sure it passes 100% before trying to solve any problems.