<div class="wrapper">
  <button data-max-width="100px" class="button">横幅100px</button>
  <button class="button">横幅デフォルト(350px)</button>
  <button data-max-width="none" class="button">横幅最大なし</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 => {
  let maxWidth;
  
  const options = {
    content: '二人の若い紳士しんしが、すっかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲てっぽうをかついで、白熊しろくまのような犬を二疋ひきつれて、だいぶ山奥やまおくの、木の葉のかさかさしたとこを、こんなことを云いいながら、あるいておりました。「ぜんたい、ここらの山は怪けしからんね。鳥も獣けものも一疋も居やがらん。なんでも構わないから、早くタンタアーンと、やって見たいもんだなあ。」',
  };
  
  const attr = button.getAttribute( 'data-max-width' );
  if ( attr ) {
    options.maxWidth = attr;
  }
  
  
  tippy( button, options );
} );