<div class="wrapper">
  <button data-placement="top" class="button">上</button>
  <button data-placement="top-start" class="button">左上</button>
  <button data-placement="top-end" class="button">右上</button>
  <button data-placement="right" class="button">右</button>
  <button data-placement="right-start" class="button">右上</button>
  <button data-placement="right-end" class="button">右下</button>
  <button data-placement="bottom" class="button">下</button>
  <button data-placement="bottom-start" class="button">左下</button>
  <button data-placement="bottom-end" class="button">右下</button>
  <button data-placement="left" class="button">左</button>
  <button data-placement="left-start" class="button">左上</button>
  <button data-placement="left-end" class="button">左下</button>
  <button data-placement="auto" class="button">自動</button>
  <button data-placement="auto-start" class="button">自動上or自動左</button>
  <button data-placement="auto-end" class="button">自動下or自動右</button>
</div>

.wrapper {
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 4rem;
/*   background-color: #999; */
}

.button {
  background: #ddd;
/*   color: #fff; */
  border-radius: 4px;
  flex: 1 1 30%;
  padding: 2rem;
}

const buttons = document.querySelectorAll('button');

buttons.forEach( button => {
  tippy( button, {
    content: button.textContent,
    placement: button.getAttribute( 'data-placement' ),
  } );
} );