1

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()));
    });
4

4 回答 4

4

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()));
    });  
});
于 2013-07-17T16:14:55.893 回答
2

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 :)

于 2013-07-17T16:43:08.413 回答
0

Try mouseenter to ensure tooltipster is called once when entering.

$('.tt').mouseenter(function(e){
    $(this).tooltipster(addCaps($(this).data()));
});
于 2013-07-17T16:14:14.520 回答
0

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

于 2013-07-17T16:15:06.047 回答