JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/arrowbox/src/arrowbox.css">
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/arrowbox/src/arrowbox.js"></script>
<div class="sampleDiv">
　<h2>この中をクリックするとツールチップが出ます</h2>
</div>
<script type="text/ejs" id="h5arrowbox">
	<div class="h5arrowbox"></div>
</script>

<script type="text/ejs" id="message">
	<div><p>吹き出しサンプル</p><p>吹き出しサンプルです</p><button class="removeArrowBox" style="float:right">OK</button></div>
</script>

CSS

.sampleDiv {
	position: relative;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	width: 300px;
	padding: 10px;
  top: 150px;
  height: 300px;
	border: 1px solid #ccc;
	text-align: center;
}

JavaScript

(function() {
	var controller = {
		__name: 'PageController',
		__arrowClass: 'position-set',
		_arrowboxController: h5.ui.components.arrowbox.ArrowBoxController,
		__ready: function() {
		},

		'.sampleDiv click': function(context, $el) {
      
			var x = context.event.pageX;
			var y = context.event.pageY;
			// 既にposition-setクラスを持つ吹き出しがあったら削除する
			var $arrowbox = this.$find('.'+this.__arrowClass);
			// 吹き出しの要素からArrowBoxインスタンスを取得
			var preArrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox);
			// 吹き出しをdispose
			preArrowbox && preArrowbox.dispose();

			// 第2引数でクラスを追加する
			var arrowbox = this._arrowboxController.create(this.view.get('message'), {
				cls: this.__arrowClass
			});
			arrowbox.show({
				position: {
					left: x,
					top: y
				}
			});
    },

		'.removeArrowBox click': function(context, $el) {
			// 吹き出し要素の取得
			var $arrowbox = $el.parents('.h5arrowbox');
			// ArrowBoxインスタンスの取り出し
			var arrowbox = this._arrowboxController.getArrowBoxFromElement($arrowbox);
			// 吹き出しの削除
			arrowbox.dispose();
		}
	};
	h5.core.expose(controller);
})();

$(function() {
	h5.core.controller('body', PageController);
});