Bootstrap 3 tooltips visible on page load

Question

I'm using Bootstrap 3 tooltips, used the examples from the docs, but the problem is they show up automatically at start, when the page is loaded all the tooltips are visible!

i want them to show only on hover, what should I do?

Answer 1

You can do like this

$(function () {
    $('[data-toggle="tooltip"]').tooltip("show");
    $('[data-toggle="tooltip"]').find(".tooltip.fade.top").removeClass("in");
 });

or

$(function () {
    $('[data-toggle="tooltip"]').tooltip("show");
    $(".tooltip.fade.top").remove();
 });

For Html :

<a href="#" data-toggle="tooltip" title="This is tooltip !">Hover over me</a>

Answer 2

I think you trigger bootstrap tooltip in document ready like this,

$('#id').tooltip('show');

Try to change like this

$('#id').tooltip();

Hope this will work