JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/@popperjs/core@2"></script>
<div class="tooltip">
  <button class="tooltip-button" aria-describedby="tooltip">I'm a button 1</button>
  <div class="tooltip-containaer" role="tooltip">I'm a tooltip 1</div>
</div>

<div class="tooltip">
  <button class="tooltip-button" aria-describedby="tooltip">I'm a button 2</button>
  <div class="tooltip-containaer" role="tooltip">I'm a tooltip 2</div>
</div>

<div class="tooltip">
  <button class="tooltip-button" aria-describedby="tooltip">I'm a button 3</button>
  <div class="tooltip-containaer" role="tooltip">I'm a tooltip 4</div>
</div>

<div class="tooltip">
  <button class="tooltip-button" aria-describedby="tooltip">I'm a button 4</button>
  <div class="tooltip-containaer" role="tooltip">I'm a tooltip 4</div>
</div>

JavaScript

const tooltips = document.querySelectorAll('.tooltip');

tooltips.forEach(tooltip => {
	const button = tooltip.querySelector('.tooltip-button');
	const container = tooltip.querySelector('.tooltip-containaer');
  
  Popper.createPopper(button, container, {
    placement: 'right',
  });
});