Clever Geek Handbook

Using ZURB Foundation for Tooltips - Newly generated DOM elements are not bound to the tooltip "hover" event

My specific use case is that I am using postback for .net to display an item update panel with their associated tooltips. I have already initialized the ZURB Foundation (provides tooltips) script on the page and the first page tooltips work fine. After postback, I want to * re * initialize the script so that these new tooltip elements are bound to the "hover" event.

A common use case is any situation where new hint-enabled elements are added in some way.

It seems to me that the "hover" binding is done on the init page before the existing collection of ".has-tip" elements, but there is handling for future .has-tip elements that go into existence.

I would like to do the following: a) Re-initialize the tooltip plugin and find new .has-tip elements to attach the "hover" event.

tried a few different ways to try and re-initialize, but

$.fn.tooltips('init');

seems to be the most reassuring as it successfully calls the init method in the script but does not bind the hover event to the new .has-tip elements.

+3


source to share


3 answers


Edit / Clarification:

  • Seems like there was a bug with dynamic content: https://github.com/zurb/foundation/pull/465

  • When the bug is fixed (you can fix it yourself, read the pull link for more information), the bug is fixed so that you can run a skin update for all pages:

    $ (doc) .tooltips ('reload');

Original Answer



If you haven't decided yet, jquery.tooltips.js has a method / function called .reload, which actually seems the most promising (code from the Foundation plugin):

reload : function() {
      var $self = $(this);
      return ($self.data('tooltips')) ? $self.tooltips('destroy').tooltips('init') : $self.tooltips('init');
    },

This is really a whole chain of their other methods, but .destroy before.init is probably best to avoid double prompts or other collision.

+1


source


I've tried many suggestions but it really works:

After finishing editing the DOM, you should call



$(document).foundation();

This proposal will update everything, including the hints. WORKS HOW TO CHARM.

+1


source


I had the same problem when modals were created with Ajax,

Here's my fix for this:

$(document)
  .on('opened.fndtn.reveal', '[data-reveal]', function () {
    $('html').css({'overflow': 'hidden'});
    $('.has-tip').each(function(i){
    var tip = $(this);
    Foundation.libs.tooltip.create(tip);
  });
})

It works for ZF v5.2 +

0


source






More articles:


All Articles