1

The need is to have a series of icons on a page which toggles their behavior when clicked. Each action icon has a tooltip which reflects the action to be taken in each of the two states.

here is an example of an action icon.

    <span name="no_quote_action" class="btn btn-xs btn-action " style="border: none"
          rel="tooltip" data-placement="right" data-trigger="hover"
          title="No-Quote this line" onclick="setNoQuote(this)">
          <span class="glyphicon glyphicon-remove" style="color: #ff0000"></span>
    </span>

On the page there is a script tag which outlines the two actions. 

<script>
function setNoQuote(_this) {
    var button = $(_this);
    button.children().attr('class', 'glyphicon glyphicon-plus');
    button.children().css('color', '#00ff00');
    button.attr('onclick', 'setDoQuote(this)');

    button.tooltip('destroy');
 //   button.attr('data-original-title', 'Undo No-Quote');
    button.attr('title', 'Undo No-Quote');
    setTips();
}

function setDoQuote(_this) {
    var button = $(_this);
    button.children().attr('class', 'glyphicon glyphicon-remove');
    button.children().css('color', '#ff0000');
    button.attr('onclick', 'setNoQuote(this)');
    button.tooltip('destroy');
  //  button.attr('data-original-title', 'No-Quote this line');
    button.attr('title', 'No-Quote this line');
    setTips();
}

function setTips() {
    $('[rel="tooltip"]').tooltip({html: true});
}

$(window).load(function () {

    setTips();

});

The problem I'm seeing is that, while the icon changes, and the previous tooltip is destroyed, the setTips(); call does not successfully add the new tooltip to the icon that was clicked. It seems like a timing issue or something because calling setTips() manually after the event completes works as expected.

Below is a complete HTML example page which demonstrates the issue.

http://blake.bitlagoon.com

Also of note, clicking in rapid succession will give different results.

Please help me understand what is going on and why. What best practice should I be using to avoid such issues?

BitLagoon
  • 33
  • 5
  • Duplicate of : http://stackoverflow.com/questions/22064881/refresh-an-element-so-its-new-tooltip-shows-in-jquery-javascript "Reload the tooltips on click" – circusdei Nov 09 '15 at 21:42
  • This question wasn't about how to reload to tooltip. If you read my answer you'll see that the issue has to do with the event thread on which the tooltip refresh is called. – BitLagoon Nov 18 '15 at 21:47

2 Answers2

0

replace this:

 setTips();

with:

button.tooltip({html: true});

if that still isn't working then add both lines

button.tooltip({html: true});
button.tooltip('show');
Scott Selby
  • 9,420
  • 12
  • 57
  • 96
  • Good suggestion, and something that was tried and demonstrates another oddity of the issue. Try the demo site, clicking on one of the x's you'll see it change, then flash the new tooltip, then the tip is removed. I'm baffled by this behavior. – BitLagoon Nov 03 '15 at 05:28
  • I think it might be because of this : button.attr('onclick', 'setDoQuote(this)'); , I'm not sure but just maybe that function is being executed when it is added as the handler – Scott Selby Nov 03 '15 at 05:45
0

Well, despite not truly understanding why the original code did not work as anticipated, I have come up with a solution that seems to work well.

By splitting the action of re-setting the tool tip out of the original button click event thread everything seems to work fine. So the trick is to wrap the setTips() function call in a timer callback function. 

setTimeout(function(){
        setTips();
    }, 300);

By extension, I'm guessing that in a more complex case or if it was decided that using a delay was not desirable, I am betting I could fire another asynchronous event to trigger the setTips() behavior and that would probably work fine as well. But I'm not going to test that at this point since the delay works well enough for my purpose.

I just wish I knew why the call to .tooltip() in the context of an event on an object prohibits it from setting the tooltip on that object correctly.

BitLagoon
  • 33
  • 5