<div class="wrapper">
	<button class="button">HTML</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;
}

.title {
	border-bottom: 1px solid #ddd;
	padding: .5rem;
	margin: .5rem 0;
	font-size: 1.125rem;
	line-height: 1;
}

.description {
	padding: .5rem;
}

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

buttons.forEach( button => {
	const options = {
		content: '<h2 class="title">allowHTML</h2><div class="description">trueの場合HTMLを使用できます。<br>falseの場合HTMLは文字列として表示されます。</div>',
		allowHTML: true,
	};
	
	
	tippy( button, options );
} );