Visualizerでツールチップを表示する方法

#目次
1. はじめに
2. 実装方法
3. 最後に

#はじめに
Webアプリを利用していて、アイコンで表示されている箇所にカーソルを当てると
以下のように吹き出しが現れて説明が表示されるようなものをみたことがあるかと思います。

![スクリーンショット 2021-01-19 14.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c39bffd6-be4e-0983-dfcc-9669017bb123.png)
例：Qiitaの記事作成画面

この吹き出しのことを、ツールチップといいます。

ツールチップがあることで画面をすっきりとさせ、
必要な時にだけ説明を見ることができるので便利な機能です。
Konyでは、簡単にこのツールチップを表示することができるので、

今回はその方法についてご説明していきます！


#実装方法
KonyのGUIメニューを使ってツールチップを表示する方法と、
Hoverアクションを使ってオリジナルのツールチップを表示する方法をご紹介します！

まず、前提としてTooltipを設定できるWidgetをご紹介します。

##利用できるWidget
表示できるWidgetの種類は以下の通りです。

| Widget名 |
|:-:|
|  Label |
| Button  |
|  Image |
| Calendar  |
|  CheckBoxGroup |
|   ListBox|
| RadioButton  |
|  RichText |
|  TextArea |
|TextBox   |

利用できるプラットフォーム
-  Windows Tablet
-  Desktop Web

ツールチップは、カーソルを合わせた時に表示される機能のため、Webのみの対応です。

##GUIでツールチップを表示する方法
今回は、Webページでよく見るヘッダー部分でのツールチップを作成します。
以下のようにImage Widgetを配置しました。
![スクリーンショット 2021-01-19 15.29.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/72849e65-e2e9-cf1c-0ac3-001980a85edb.png)

ImageWidgetを選択した状態で、右メニューからImageタブを選択し、
**Tool Tip**に表示させたい文字を入力してください。

検索アイコンには、「社員を検索」と表示するよう設定しました。
![スクリーンショット 2021-01-19 15.27.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/9bd44bbe-e947-26a8-d7b2-9647a9f29c83.png)

他のアイコンについても同様にツールチップに表示する文字を入力します。

実際にどうなったかみてましょう！
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/aJITnin9GD">pic.twitter.com/aJITnin9GD</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1351416986434035713?ref_src=twsrc%5Etfw">January 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

それぞれのアイコンにカーソルを当てるとツールチップが表示されていることがわかると思います。
今回はImage Widgetで設定しましたが、
上記の一覧にある他のWidgetでも同様に設定が可能ですので、参考にしてみてくださいね！


ここまでが、Visualizerのメニューを使ってできるツールチップの実装方法になります。
ツールチップを吹き出しのように表示したい場合や、
色をつけたい場合、ホバーアクションを使うことでツールチップのように見せることができるので、
その方法についても紹介します。


##オリジナルのツールチップを表示する方法

まず、ツールチップを表示するために、表示するWidgetを用意します。
今回は`flxToolTip`を作成しました。
![スクリーンショット 2021-01-21 22.06.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7f564119-62b2-ba98-af70-1710f86db2b7.png)

はてなアイコンにカーソルが触れた時（ホバーした時）に、`flxToolTip`を表示したいので、
Hoverアクションに対応しているFlexContainerの中にアイコン画像を設置します。

![スクリーンショット 2021-01-21 22.10.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/bd2aaf72-078b-2591-7b18-b2bd0ac3ac78.png)

次に、カーソルが触れた時（ホバーした時）に`flxToolTip`が表示されるように、
Controllerにアクションを追加していきます。

```Form1.controller.js
define({ 

  isHover: false,

  onHoverFlxImgHelp: function(context) {
    var self = this;
    if ((context.eventType == constants.ONHOVER_MOUSE_ENTER || context.eventType == constants.ONHOVER_MOUSE_MOVE) &&
        !self.isHover) {
      self.isHover = true;
      this.view.flxToolTip.isVisible = true;
    } else if (context.eventType == constants.ONHOVER_MOUSE_LEAVE) { 
      self.isHover = false;
      this.view.flxToolTip.isVisible = false;
    }
    self.view.flxToolTip.forceLayout();
  }

});
```
onHoverFlxImgHelp：
カーソルがWidget上に移動した時に発生するアクションです。
アクション実行時に、カーソルがどの位置にあるか`context`の値で取得します。

カーソルが対象Widget内に入った時に、`flxToolTip`を表示
範囲外に移動した場合に、`flxToolTip`を非表示に設定しました。
それぞれのイベントを簡単に説明します。

| イベント名 | 説明 |
|:-:|:-:|
|  ONHOVER_MOUSE_ENTER |  マウスがWidgetの範囲に入った時のイベント |
|  ONHOVER_MOUSE_MOVE | マウスがWidgetの範囲で動いている時のイベント  |
|  ONHOVER_MOUSE_LEAVE | マウスがWidgetの範囲外に移動した時のイベント  |

これで、オリジナルのツールチップの表示・非表示のセットができました。

`flxHelp`にホバーした時に、アクションを実行したいので、
`flxHelp`を選択した状態で右メニューの**Action**=>**onHover**を選択します。
![スクリーンショット 2021-01-21 22.20.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e03e5933-4a2b-d601-d1ff-6494a176a62c.png)

アクションメニューが開きますので、
**Invoke Function**を選択し、`onHoverFlxImgHelp`を選択してください。
![スクリーンショット 2021-01-21 22.21.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/e5ced7e1-9536-f2ba-0e28-d76fac839955.png)
アクション実行時にパラメータを取得したいので、
**Input Parameter**に`context`をセットします。
![スクリーンショット 2021-01-21 22.22.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f7c772fb-3da7-d08c-11c1-79b133ea906b.png)

これで設定が完了しました:ok_hand_tone1:
実際にどうなったかみてみましょう！
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/bqj9gJQsfc">pic.twitter.com/bqj9gJQsfc</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1352240777947086849?ref_src=twsrc%5Etfw">January 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ホバーした時に、ツールチップが表示され、
カーソルがWidget外に移動すると、ツールチップが非表示になったことがわかると思います！

#最後に
今回はツールチップを表示する方法を2通りご紹介しました。
Webアプリでよく実装されている機能なので、是非活用してみてくださいね:raised_hands:

#参考
[FlexContainer Events
](https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/content/FlexContainer_Events.htm)