javascript - Bootstrap tooltip shown instant at second mouseover -
i have html-element has title title ="this tooltip"
, class class="tooltips"
.
in script.js following code (just demonstration of problem):
var timeout; $('.tooltips').mouseenter(function(){ var = $(this); if(timeout){ cleartimeout(timeout); } timeout = settimeout(function(){ that.tooltip('show'); settimeout(function(){ that.tooltip('hide'); }, 1000); }, 1000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <br /> <br /> <a href="#" title="i tooltip" class="tooltips">hover me</a>
what should do: if enter element pointer, should happen nothing. after delay of second, tooltip should appear , after second, tooltip should disappear.
what happens: first time worked how expected, if hover element second time, tooltip appears instantly , disappears after 2 seconds delay. seems first tooltip('show')
enables tooltip appearing on mouseover.
how can make work?
i have solution problem. seems that
.tooltip('show')
is enabling tooltips element, follwing hovering display tooltip.
var timeout; $('.tooltips').mouseenter(function(){ var = $(this); if(timeout){ cleartimeout(timeout); } timeout = settimeout(function(){ that.tooltip('enable'); that.tooltip('show'); settimeout(function(){ that.tooltip('disable'); }, 1000); }, 1000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <br /> <br /> <a href="#" title="i tooltip" class="tooltips">hover me</a>
should trick
Comments
Post a Comment