hifiveが提供している業務システム開発で使えるUIライブラリの紹介です。今回はArrowBoxを紹介します。ArrowBoxは指定したDOMの上下左右、任意の場所に対してツールチップを出すライブラリです。
今回はクリックした場所にツールチップを出す方法を紹介します。（前回の記事も合わせてご覧ください。）
動作デモはこちらで確認できます。使ってみているところは下の画像を参照してください。
使い方
HTMLはとてもシンプルなものです。ただし、h5arrowboxというIDのDOMを用意しているのが特徴になります。
そして、JavaScriptのコントローラは次のようになります。view.registerが特徴です。そして、 this.__arrowClassを追加してあります。このクラスはツールチップの独自のクラス名としておきます。このクラス名があるかどうかで、ツールチップが表示済みかどうかを判定します。
そして、ボタンをクリックした時のイベントを作成します。この時の処理は2つあり、まずすでに表示しているツールチップがあれば、それを消します。
そして後半でツールチップを表示します。この時、ポジションを指定することで表示場所が指定できます。ポジションは context.event.pageX/context.event.pageYで取得できます。
さらに吹き出しを消すためのイベントも作成します。
このような実装によって、ツールチップがクリックした場所に出せるようになります。
動作デモはこちらで確認できます。ヘルプとしてぜひ使ってみてください。
