移动端图表tooltip设计思考

在做移动端规范时遇到一个tooltip设计的问题，tooltip的位置应该放在哪里？tooltip松手后是否还展示？

参考了一些竞品最后确定了一个适合我们场景的答案。

首先看到一些产品，如天天基金、支付宝等金融类，不使用tooltips，而是将图例和数据信息展示到一块。随着手指左右滑动，图例旁的数据刷新为触摸日期对应的数据信息。

这样的好处是

，潜在的问题是，在我们的产品场景中，

（8-10个），会占据较大的空间，不便于拓展。不适合我们的场景，所以放弃这种方式。

收集一些移动端产品的图表展示场景，看其他产品的Tooltip的位置该如何确定，这里分

两个方向来进行总结分析。

在Y轴上下方向，大概有这四种方式，其中一、二、四或多或少都会有遮挡情况，尤其当数据类别偏多时，所以选择

（数据类别偏多也会遮挡页面其他区域，但考虑到查看数据的同时不会查看其他内容，可以接受）。

在X轴左右方向，有如下三种常见位移方式，由于我们选择了在图表上方进行展示，这里选择了

。

最终效果：

回到tooltip的目的出发考虑：由于移动端屏幕空间极为有限，图表往往呈现的是核心数据及趋势等，更多相关的详细信息则需要通过交互的方式进一步查看。

而在查看详细信息的操作上，如果信息量较大，用户一直按压显然体验不好。

由于我们选择在图表区域上方展示tooltip，如果tooltip一直存在，会干扰用户查看其他页面信息（标题、数据直接展示等），肯定不可取。

这时我想到可以

，既能给用户查看信息的时间，也能解决持续遮挡或需要用户手动取消掉tooltip的问题。参考Material-UI定义的默认tooltip消失时间为1.5s，考虑到图表中的信息更多更复杂，最后我们定义时长为3s。