CODEWITHSUNDEEP
jqueryhtmlhovertooltipmouseover
chuckfinley
chuckfinley

Reputation: 2595

jQuery: mouseover triggered only from the second hover

for some reason i need to put my mouse over "Details" anchor twice for the tooltip to appear. Why is that?

HTML code bit:

<a class="tt" data-animation="grow" data-position="left" data-speed="500" data-offsetx="41" data-offsety="38" data-maxwidth="683" data-interactive="true" data-theme=".tooltipster-standard" title="<div><h1>Package Name<span>£99.99</span></h1></div>">Details</a>

jQuery code:

    $('.tt').mouseover(function(e){
        $(this).tooltipster(addCaps($(this).data()));
    });

Upvotes: 1

Views: 703

Answers (4)

Jamil Hneini
Jamil Hneini

Reputation: 555

You Could Use Something Like That To HTML:

<a class="tt" OnMouseOver="Hover()" ...other attributes and tags

From Javascript(JQUERY) side:

function Hover(){
$(this).tooltipster(addCaps($(this).data()));
}

Or Created with pure JavaScript:

document.querySelector(".tt").addEventListener("onmouseover",function(){

$(this).tooltipster(addCaps($(this).data()));

},false);

Or Created it with Jquery :

$(".tt").hover(function(){
$(this).tooltipster(addCaps($(this).data()));
}

Explination:
This is due That mouseover jQuery methode Work When The User's Mouse is already in and move over That You need to enter the area first than move the mouse over it again also hover include enter and over that's why it work.
+ As My Friend Said Upgrade your Version of JQUERY. That My Point If View Any Comments or suggestion are welcomed :)

Upvotes: 2

JohnnyJS
JohnnyJS

Reputation: 1472

use the hover instead of mouseover also consider to upgrade the jQuery version.

Upvotes: 0

Jason P
Jason P

Reputation: 27012

Because tooltipster() sets up the tooltip, it doesn't show it.

So your first mouseover sets up the tooltip, then the second shows the tooltip.

Try this instead:

$(document).ready(function() {
    $('.tt').each(function(e){
        $(this).tooltipster(addCaps($(this).data()));
    });  
});

Upvotes: 4

Split Your Infinity
Split Your Infinity

Reputation: 4229

Try mouseenter to ensure tooltipster is called once when entering.

$('.tt').mouseenter(function(e){
    $(this).tooltipster(addCaps($(this).data()));
});

Upvotes: 0

Related Questions