Infinite scroll + tooltips

4

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:

link

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

    
asked by aitor 25.10.2018 в 10:35
source

1 answer

7

As @Ragebi says, you're creating the tooltips wrong. Your variable tt does not contain an element but an object with all the elements of the class .infinite-scroll-item . Therefore, what you must do is go through it and go creating the tooltips individually.

let tt = $('.infinite-scroll-item');
tt.each(function(){
  new Tooltip(this, {
  title: "Tooltip",
  trigger: "hover",
});
})

I leave here a snippet and the modified codepen (if you want to fork):

let tt = $('.infinite-scroll-item');
tt.each(function(){
  new Tooltip(this, {
  title: "Tooltip",
  trigger: "hover",
});
})
.infinite-scroll-container .infinite-scroll-item {
  display: block;
  width: 100px;
  height: 50px;
  border-radius: 5px;
  background-color: gray;
  margin: 10px;
}

.popper,
.tooltip {
  position: absolute;
  background: green;
  color: black;
  width: 150px;
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-align: center;
}

.tooltip {
  max-width: 200px;
  width: auto;
  font-size: 1rem;
  padding: 0.5em 1em;
}

.popper .popper-arrow,
.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: green;
}

.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}

.popper[x-placement^="top"] .popper-arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
  margin-left: 5px;
}

.popper[x-placement^="right"] .popper-arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
  margin-right: 5px;
}

.popper[x-placement^="left"] .popper-arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/tooltip.js"></script>
<script src="https://unpkg.com/[email protected]/dist/infinite-scroll.pkgd.min.js"></script>
<div class="infinite-scroll-container">
  <a href="#" class="infinite-scroll-item"></a>
  <a href="#" class="infinite-scroll-item"></a>
  <a href="#" class="infinite-scroll-item"></a>
  <a href="#" class="infinite-scroll-item"></a>
  <a href="#" class="infinite-scroll-item"></a>
</div>

link

    
answered by 25.10.2018 / 12:19
source