Edit in JSFiddle


              
            
          
            
              
                
button{margin:40px;}
<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>