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