<div class="wrapper">
  <button class="button">light</button>
  <button class="button">light-border</button>
  <button class="button">material</button>
  <button class="button">translucent</button>
  <button class="button">original-1</button>
  <button class="button">original-2</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;
}

.tippy-box[data-theme~='original-2'] {
    background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    color: white;
}

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

buttons.forEach( button => {
  const options = {
    content: button.textContent,
    theme: button.textContent,
  };
  
  
  tippy( button, options );
} );