Menu icon Foundation
Rebuild Tooltips

I am having issues with tooltips for content thats generated with AJAX.

On the same page I can hard code the tooltips and they work fine, but when I generate content with tooltips using AJAX the titles are not being pulled and moved to the tooltip.

Is there a function to destroy and rebuild the tooltips that I can attach to my AJAX to maybe resolve this issue?

Below I attached the jQuery I am using to generate the tooltip and it's output.

      var accreditation_td = jQuery(document.createElement('td')).attr('data-field-name', 'accreditations');

      jQuery.each(school.accreditations, function(index, value) {
          accreditation_a = jQuery(document.createElement('span')).attr('data-tooltip', '').addClass('has-tip').attr('title', value.title).text(value.acronym);
          accreditation_td.append(accreditation_a);
      });

      row.append(accreditation_td);
            

         

<td data-field-name="accreditations"><span data-tooltip="" class="has-tip" title="North Central Association of Colleges and Schools, The Higher Learning Commission">NCACS / HLC</span></td>
            

         

tooltipsjsAJAX

I am having issues with tooltips for content thats generated with AJAX.

On the same page I can hard code the tooltips and they work fine, but when I generate content with tooltips using AJAX the titles are not being pulled and moved to the tooltip.

Is there a function to destroy and rebuild the tooltips that I can attach to my AJAX to maybe resolve this issue?

Below I attached the jQuery I am using to generate the tooltip and it's output.

      var accreditation_td = jQuery(document.createElement('td')).attr('data-field-name', 'accreditations');

      jQuery.each(school.accreditations, function(index, value) {
          accreditation_a = jQuery(document.createElement('span')).attr('data-tooltip', '').addClass('has-tip').attr('title', value.title).text(value.acronym);
          accreditation_td.append(accreditation_a);
      });

      row.append(accreditation_td);
            

         

<td data-field-name="accreditations"><span data-tooltip="" class="has-tip" title="North Central Association of Colleges and Schools, The Higher Learning Commission">NCACS / HLC</span></td>
            

         
Devin McCabe over 5 years ago

I'm doing something similar and the only way I can get it to regenerate tooltips is to init foundation again:

 $(document).foundation()

I can't figure out a way to target only the tooltips.

Andrew Clarke over 5 years ago

This is the best way I've found to initialize tooltips on generated content. In your last line, use:

 row.append(accreditation_td).foundation('tooltip');

If you're appending a bunch of rows you should instead perform this on their wrapper when you're finished.