Tooltipster插件在第一次尝试时不起作用

Question

I am using the tooltipster plugin to have tooltip on hover.

My code is posted in this jsfiddle , for some reason the tooltip wouldn't work on the first try, eg if you click Run in jsfiddle and move your pointer over the div that says

Hover over me

Nothing happens but if you move your pointer away and then back on hover, it works. Why doesn't it work on the first try?

Thanks.

Answer 1

because you have declerad tooltip plugin on hover function. after declared it can run. so if you move this code to outside of hover function it will work.

    $('.tooltip0').tooltipster({
                    content: $('<div id="mikrah">test hover div</div>'),
                    delay: 0,
                    theme: 'tooltipster-shadow',
                    contentAsHTML: true
   });

fiddle

Answer 2

Try this:

 $('.tooltip0').tooltipster({
    content: $('<div id="mikrah">test hover div</div>'),
    delay: 0,
    theme: 'tooltipster-shadow',
    contentAsHTML: true
});
$('.tooltip0').hover(
        function () {
            $('#students').attr('src', 'http://www.impexsoftdesign.com/images/stories/weird-and-funny-facts/lion.jpg');

        },
        function () {
            $('#students').attr('src', 'http://cdn.oxwordsblog.wpfuel.co.uk/wpcms/wp-content/uploads/Lion_iStock_XSmall-300x300.jpg?24a0bc');
        });

You were starting the tooltipster inside the inHandler in the hover , so, first time it initializes the tooltipster and only on the second hover it runs..

Answer 3

As stated in the hover() documentation,

.hover( handlerIn, handlerOut ) Where the handlerOut is a function to execute when the mouse pointer leaves the element.

Thus the second function, that shows the text, will fire after you leave the image with the mouse.