<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 );
} );