tooltips in scrollable container - with tippy.js

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    
    <section>
      <ol>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
        <li title="tooltip!">
          Foo Bar Baz
        </li>
      </ol>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/2.5.3/tippy.all.js"></script>
    <script src="script.js"></script>
  </body>

</html>

const lis = [...document.querySelectorAll('li')]

for (let i=0; i<10; i++) {
  tippy(lis[i], {
    placement: 'right',
    interactive: true,
    arrow: true,
    appendTo: lis[i].parentNode,
    popperOptions: {
      modifiers: {
        preventOverflow: { enabled: false },
        hide: { enabled: false }
      }
    }
  })
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  box-shadow: 0 0 3px black;
}

ol {
  margin: 0;
  padding: 20px;
  list-style-position: inside;
}

ol li {
  box-sizing: border-box;
  height: 50px;
  border-top: 1px solid lightblue;
}