Salman Salman - 1 month ago 5
HTML Question

Why doesn't the delay time option work for my tooltip?

Ive created a simple tooltip using bootstrap and JQuery. But the delay time for the tooltip simply doesn't work for me. Its taking obviously longer than 100 milliseconds.

HTML:

<p class="myHover" onclick="jobFunction()" data-toggle="tooltip" title="Hooray!" data-delay=100>GIS Researcher</p>


JavaScript:

$(document).ready(function(){
$(".myHover").tooltip();
});


Ive properly referenced bootstrap and jQuery in my head tag.

Answer

Works fine for me. Your fiddle didn't load any of the required libraries.

I changed your paragraph to a span and set the tooltip placement to bottom to make it show up in a more sensible location.

$(document).ready(function() {
  $(".myHover").tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<span class="myHover" data-toggle="tooltip" title="Hooray!" data-delay="100" data-placement="bottom">GIS Researcher</span>