Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

inline tooltip content disappears when alternating instances

I'm trying the INLINE tooltip demo (from tipped last version 4.5.7, downloaded today). My code is:
<span class='inline' data-tipped-options="inline: 'itt-1'">XXX1</span>
<span class='inline' data-tipped-options="inline: 'itt-1'">XXX2</span>
<span class='inline' data-tipped-options="inline: 'itt-2'">YYY1</span>
<span class='inline' data-tipped-options="inline: 'itt-2'">YYY2</span>

<div id="itt-1" style="display:none;">
<b>first</b> tooltip
</div>

<div id="itt-2" style="display:none;">
<b>second</b> tooltip
</div>

<script type="text/javascript">
$(document).ready(function() {
Tipped.create('.inline', {
inline: true
});
});
</script>

When I alternate while hovering between words XXX1 and XXX2, or between words YYY1 and YYY2, the tooltip content appears a few times, and after the content disappears (the tooltip do appears but with no content). Sorry if my explanation is not accurate enough...

BTW, adding the option : detach: false has unfortunately no effect.

Is it a bug? As in the demo, I'm calling jquery-1.12.2, and I'm using Firefox 46.0

Comments

  • edited May 2016

    Each element with an inline tooltip requires its own unique inline element. Since the element is moved into the tooltip and not cloned (that would invalidate the page, since an id has to stay unique).

    What you see is an element being pulled from one tooltip to the next, give each tooltip its own element and you won't have that problem. You'd otherwise never be able to show all tooltips at the same time.

  • Thanks. But it will lead to duplicated code, since the content tooltip "itt-1" (for example) has to be copied with another id.

    How can I do, in order to avoid duplicated code? In my web page, I Can have up to twenty word which must have the same content tooltip...

  • edited May 2016

    I don't want to see all tooltips at the same time.

    I allow your library to hide a tooltip before to move it at another location in the window...

  • edited May 2016

    If you want to avoid duplicate code you could loop over elements and create elements dynamically, or even clone them from something you already have on the page. For example:

    $(document).ready(function() {
      $('.has-tooltip').each(function(i, element) {
       Tipped.create(element, $('<strong>').html('text'));
      });
    
      $('.has-tooltip-cloned').each(function(i, element) {
       Tipped.create(element, $('#some-id').clone());
      });
    });
    
  • I currently use a workaround, i.e. adding
    afterHide: function(content, element) {
    window.location.reload();
    }
    at the end of the options of Tipped.create(), but I agree that it is slow (works on a PC, not on an Android tablet)...

  • edited May 2016

    Reloading the page seems like a bad idea, workarounds shouldn't be needed.

    If you know that certain elements have identical tooltips, group them by class and create tooltips as in my example above.

  • My previous post (6:49) was written too quickly, without see yours (6:47).
    Many thanks.

Sign In or Register to comment.