0

I am using tooltipster plugin to create tooltips.

When tool tip are shown up, if you then click on the background (pink) - it will alert you ID from data-post-id='xx' that has been closed (functionAfter). It is showing the correct ID.

However, instead of clicking on the background (pink) and if you click on any other Tips, it will show you incorrect ID. What is causing this and how to fix?

See Demo: http://jsfiddle.net/ww60y38h/

$(".tip").tooltipster({
        content: 'Loading...',
        contentAsHTML: true,
        offsetY: -13,
        autoClose: true,
        theme: 'tooltipster-punk',
        trigger: "click",
        onlyOne: true,
        multiple: false,
        interactive: true,
        functionBefore: function(origin, continueTooltip) {
            continueTooltip();
            postID = $(this).data('post-id');
            origin.tooltipster('content', "Post ID: " + postID);
        },
        functionAfter: function(origin) {
            alert("PostID Tooltip Closed:" + postID);
        }

});

HTML:

<div style="height: 900px; background-color:pink">
  <div class="tip" data-post-id='1'>ToolTip PostID 1</div>
  <div class="tip" data-post-id='2'>ToolTip PostID 2</div>
  <div class="tip" data-post-id='3'>ToolTip PostID 3</div>
</div>
I'll-Be-Back
  • 10,530
  • 37
  • 110
  • 213

1 Answers1

1

Do not use a single global variable postID for all tooltips, it gets overwritten each time a tooltip opens. Put the var keyword before postID in functionBefore, and define it the same way in functionAfter.

Louis Ameline
  • 2,779
  • 1
  • 25
  • 25
  • Thank you. That seem to fix it. Another issue, how do I get the value from Note input when the toolip is closed? See example http://jsfiddle.net/ww60y38h/8/ – I'll-Be-Back Jul 09 '15 at 11:04
  • I manage to do it by using `("#note").focusout(function() {});` to update the content for `functionAfter` - Example: http://jsfiddle.net/ww60y38h/14/ - there must be a better approach? – I'll-Be-Back Jul 09 '15 at 12:12
  • I'm not completely sure what you're trying to do, but what you do seems like a valid approach. Catching the value in functionAfter may not be possible as the tooltip and its content have already been removed from DOM. – Louis Ameline Jul 09 '15 at 15:24
  • I want user to type something in the tooltip and I want to get a value of in the functionAfter – I'll-Be-Back Jul 09 '15 at 15:54
  • I can think of several possibilities, but not better than the one you gave. That's another question anyway. – Louis Ameline Jul 09 '15 at 19:27