tippy.js with title attribute not work on dynamic content

Question

I use Tippy for all title tags on my site with the following call.

function tooltip() {
    tippy('.tips', {
        arrow           : true,
        animateFill     : false,
        placement       : 'bottom',
        delay           : 5,
        distance        : 15,
        maxWidth        : 350,
        followCursor    : false,
        dynamicTitle    : true,
        allowHTML       : true,
        theme           : 'custom',
        zIndex          : 999999,
        ignoreAttributes: true,
        content(reference) {
            const title = reference.getAttribute('title');
            reference.removeAttribute('title');
            return title;
        },
    });
}
function create_div(titel, width, id, content) {
    $('body').append('<div class="div" data-id="' + id + '" style="max-width:' + width + 'px !important;"><h2><span>' + titel + '</span><i class="fas fa-times-circle closediv" data-id="' + id + '"></i></h2><div class="div_in" data-id="' + id + '">' + content + '</div></div>');
    tooltip();
}
$(function () {
    $('.act').on('click', function () {
        let ul = '<ul><li class="tips" title="test">Test</li></ul>';
        create_div('Title', 350, 'tt', ul);
    });
});

But when I dynamically add a div to the body with content that also has a title attribute, the tooltip doesn't work there.

I have already put the typing call into a function and called it again in the callback of the div generation but it still doesn't work.

Answer 1

I would start with just this change, where instantiation of tippy will be done only on .tips that are not already instantiated (not .tipped ).

function tooltip() {

  // Instanciate tippy, but not on already instanciated ,tips
  tippy(document.querySelectorAll(".tips:not(.tipped)"), {
    arrow           : true,
    animateFill     : false,
    placement       : 'bottom',
    delay           : 5,
    distance        : 15,
    maxWidth        : 350,
    followCursor    : false,
    dynamicTitle    : true,
    allowHTML       : true,
    theme           : 'custom',
    zIndex          : 999999,
    ignoreAttributes: true,
    content(reference) {
      const title = reference.getAttribute('title');
      reference.removeAttribute('title');
      return title;
    },
  });
  
  // Add the tipped class
  document.querySelectorAll(".tips:not(.tipped)").forEach(function(tip => {
    tip.classList.add("tipped")
  })
}
function create_div(titel, width, id, content) {
  $('body').append('<div class="div" data-id="' + id + '" style="max-width:' + width + 'px !important;"><h2><span>' + titel + '</span><i class="fas fa-times-circle closediv" data-id="' + id + '"></i></h2><div class="div_in" data-id="' + id + '">' + content + '</div></div>');
  tooltip();
}
$(function () {
  $('.act').on('click', function () {
    let ul = '<ul><li class="tips" title="test">Test</li></ul>';
    create_div('Title', 350, 'tt', ul);
  });
});