calebjacob/tooltipster

Tooltip hides on second instance hover when hover over second is performed faster than load?

SaltedLevity opened this issue · 2 comments

SaltedLevity commented

Hi! Sorry for the wonky title, wasn't sure how to describe this.
I'm not the most advanced user so I'll try to articulate this as best as I can.

I've got two tooltips in the same paragraph that are pulling up the same inserted html. I have content cloning set to true, since they're pulling in the same thing.
When you hover over one, it loads fine. Pull your mouse off it disappears. Then hover over the second, it loads fine.
However when you hover over the first and it loads, then immediately hover over the second (essentially hovering over the second target faster than the first has the chance to fade away, the second one loads for a moment and then vanishes (the frame remains, but empty)

I've confirmed this happens even with the examples given on the website: https://gyazo.com/9a69f1f19b11c06a51004449e730762e

Here's the code I have to test:

<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
<script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
<style>
.tooltip {
    text-decoration: underline;
    cursor: pointer;
}
.tooltip_templates {
    display: none;
}
</style>
<script>
         $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
		 $('.tooltip').tooltipster({
    contentCloning: true
});
    </script>
</head>

<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
		<p>Lorem ipsum dolor sit <span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut <span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span> veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span>

<div class="tooltip_templates">
    <span id="tooltip_content">
        <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
    </span>
</div>
</body>
louisameline commented

Hi, you're instantiating the tooltips twice here. Remove the second, and put the contentCloning option in the first one. Thank you

SaltedLevity commented

Thank you! I'm very much fumbling my way through this and learning as I go. I appreciate the quick response to what was obviously user dumbness! Thanks for the plugin!