<div class="wrapper">
	<button data-arrow="true" class="button">あり</button>
	<button data-arrow="false" class="button">なし</button>
	<button data-arrow="svg" class="button">SVG</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: 0 1 31%;
  padding: 2rem;
}

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

buttons.forEach( button => {
	let arrow;
	const options = {
		content: button.textContent,		
	};

	const attribute = button.getAttribute( 'data-arrow' );
	if ( 'true' === attribute ) {
		arrow = true;
	} else if ( 'false' === attribute ) {
		arrow = false;
	} else if ( 'svg' === attribute ) {
		arrow = '<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#000000"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>';
		options.offset= [0, 20];
	} else {
		arrow = attribute;
	}
	
	options.arrow = arrow;

	tippy( button, options );
} );