I'm trying to implement a page with infinite scroll and add tooltips to some items. Infinite scroll works fine, but tooltips only appear on the first page, before adding new items with the scroll. This is the example:
The tooltip is in the small yellow circle, when you put the cursor over it. If you scroll down, in the following pages the rest of tooltips are not built, although I'm using the append event to build them every time the page is reloaded.
Apparently the code is very simple and I do not know what I'm doing wrong:
// TOOLTIPS
// ------------------
var miTootip = $('.tooltip-item');
new Tooltip(miTooltip, {
// options
});
// INFINITE SCROLL
// ------------------
var inf = $('.infinite-scroll-container').infiniteScroll({
// options
});
inf.on('append.infiniteScroll', function(event, response, path, items) {
// ESTA ES LA PARTE QUE NO FUNCIONA
new Tooltip(miTooltip, {
// options
});
});
I would appreciate any help to find out why the tooltip does not work on the following pages (those that are loaded by scrolling).
EDITED: When trying to codepen, I realized that the error is elsewhere. The tooltip only appears in the first item (it does not have to do with infinite-scroll). This is the pen: link