CODEWITHSUNDEEP
tooltipzurb-foundation
Lucas Balzer
Lucas Balzer

Reputation: 316

Using ZURB Foundation for tooltips -- Newly-created DOM elements are not bound to tooltip 'hover' event

My specific usage case is that I'm using a .net postback to display an update panel of elements that have tooltips associated with them. I have already initialized the ZURB Foundation (provides tooltips) script on the page, and the first-page tooltips work great. After the postback, I want to *re*initialize the script so that these new tooltip items are bound to the 'hover' event.

Generic usage case is any situation where new tooltip-enabled elements are added in any way.

It appears to me that the 'hover' binding is done on page init to the existing collection of '.has-tip' elements, but there is handling of future .has-tip elements coming into existance.

I'd like to do the following: a) Reinitialize the tooltip plugin and search for new .has-tip elements to attach the 'hover' event to.

have tried a number of different ways to try and reinitialize, but 

$.fn.tooltips('init');

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

Upvotes: 2

Views: 4464

Answers (3)

mgrabovskyi
mgrabovskyi

Reputation: 1

I had the same problem when genereted modal windows with Ajax,

Here is my fix for that:

$(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+

Upvotes: 0

Sherlock-jr
Sherlock-jr

Reputation: 83

I have tried a lot of suggestions, but what truly works is:

After you finish editing the DOM, you have to call to 

$(document).foundation();

This sentence is going to refresh everything, including your tooltips. WORKS LIKE A CHARM.

Upvotes: 1

Peter Hanley
Peter Hanley

Reputation: 1284

Edit/Clarification:

  1. it seems like there was a bug with dynamic content: https://github.com/zurb/foundation/pull/465

  2. When the bug is fixed (you can fix it yourself, read the pull req. for more info), the bug is fixed, so you can trigger a page-wide tool-tip refresh with:

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

Original answer

If you didn't figure it out yet, jquery.tooltips.js has a method/function called .reload that actually seems to be the most promising (code is from the foundation plugin):

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

It's really just a chain of their other methods, but it's probably best to .destroy before .init to avoid double tooltips or some other collision.

Upvotes: 1

Related Questions