选择伪选择器的工具提示

Question

在Medium.com网站上

我想知道当双击一个单词或句子以显示工具提示时，工具提示是如何演变的，包括分享，编辑和其他东西。

Answer 1

代码缩小了，但我猜它的完成方式如下： 隐藏的元素将添加到页面中。使用chrome dev工具，我设法看到它的类是＆＃39; buttonset - highlightmenu＆＃39;。

将dblclick的事件侦听器添加到页面中。事件处理程序记录了点击的位置。然后在超时后它获得所选范围（使用window.getSelection）。下一个词干是保存文本（因此它可以用于动作）并使隐藏元素在正确的位置可见。

如果您想尝试对其代码进行重新设计，请查看开发工具，来源标签。它们有3个js文件，其中2个包含对此元素的引用。

如果您感到懒惰，可以使用selection sharer library。