[客户端][UI] 通用组件之 ToolTip

作者：邱子鉴
创建时间：2016.10.29
最后更新：2016.10.29

通用组件

名称：Common_ToolTip 和 ButtonWithParamClickEvent按钮
路径：/Game/UMG/UtilityWidget/

需求说明

在手机游戏上，有几类ToolTip的需求，
**1. **当按住某个按钮的时候，会弹出一个tip，手指抬起时，这个tip就消失，如下图

Paste_Image.png

**2. **当点击一个按钮时，弹出一个下拉框，手抬起时，这个下拉框仍然存在，如下图

Paste_Image.png

**3. **当然，unreal默认提供了一种ToolTip，即，在PC平台上，鼠标滑过控件时，显示tooltip，滑出后消失。在手机平台上待测试（todo）。在属性面板的TooltipWidget中设置

Paste_Image.png

优点

1. 通过MenuAnchor实现，可自动实现屏幕边缘检测，当处于边缘状态时，自动调整位置；当失去焦点时，会自动关闭。
2. 高复用性。控件只是一个容器， tip的布局、样式，由自己定义。
**3. **利用ButtonWithParamClickEvent成功解决误操作问题。误操作描述：我们有一列按钮，每个按钮点击时都会弹出tooltip，当我们在btn1按下鼠标（or手指）并滑动到btn2抬起时，会在btn2上弹出tooltip。具体使用方法见后文。

切记，不可在按下时就弹出tooltip，因为如果btn在一个scrollBox下时，滑动功能和弹tooltip功能会冲突。

**4. **使用方便。

开tooltip：OpenMenuByContentAndPos(UUserWidget* Content, Vector2D Pos)
关tooltip：CloseToolTip()

需求2使用方法

1. 为了避免误操作，使用ButtonWithParamClickEvent为响应输入源。误操作描述参见优点>3.
ButtonWithParamClickEvent其实就是一个按钮，只不过它的OnClick事件会抛出PointerEvent参数，这个参数可以让我们找到鼠标按下的坐标。并且，设置ClickMethod和TouchMethod设置为Precise**。