<div class="wrapper">
  <button data-action="click" class="button">クリック時に表示</button>
  <button data-action="focusin" class="button">フォーカス時に表示</button>
</div>

.wrapper {
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 4rem;
}

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

.tippy-box[data-theme~='original-1'] {
  background-color: tomato;
  color: yellow;
}

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

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