JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
<button data-balloon="出ました！" data-balloon-pos="up">上に出ます</button>

<button data-balloon="出ました！" data-balloon-pos="left">左に出ます</button>

<button data-balloon="出ました！" data-balloon-pos="right">右に出ます</button>

<button data-balloon="出ました！" data-balloon-pos="down">下に出ます</button>

<button data-balloon=" 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">顔文字とか</button>


<button data-balloon-length="medium" data-balloon="東京（とうきょう、英語: Tokyo）は、日本の関東平野中央部の東京湾に面する地域、もしくは同域に存在する都市である。都市圏として世界最大の人口・経済力を擁しており、現在の日本の事実上の首都である。" data-balloon-pos="up">東京</button>

CSS

button{margin:40px;}