table上的hover-card-如何实现?

95 阅读1分钟

需求场景:table 中一般列都是固定宽度,如果内容超出,比如广告位名称、合作公司简介,超出部分会显示...

问题

通过 title显示, 用户无法复制(当然,直接选中包含省略号的文字,是可以复制全部信息的,但这个对用户的要求较高)

解决方案

鼠标悬浮在省略信息上(移动端如何优化?),显示 tooltip(or hover card),用户可以复制 tooltip 中的内容,以便做进一步的查询

参照效果

技术难点:

   1. 判断鼠标位置是否在目标元素上、
   2. mouse-in、mouse-out
   3. 防抖动
   4. 下方可视高度不够,hover card 自动上移,反之亦然。