javascript - 来自选择伪选择器的工具提示

Question

在 Medium.com 网站上，我想知道当双击一个单词或句子以显示带有共享、编辑和其他内容的工具提示时，工具提示是如何演变的。

Answer 1

代码被缩小了，但我猜它的完成方式如下:一个隐藏的元素被添加到页面。使用 chrome 开发工具，我设法看到它的类是“buttonset--highlightmenu”。

dblclick 的事件监听器已添加到页面。事件处理程序记录点击的位置。然后在超时后它获得选定的范围(使用 window.getSelection)。下一个 stem 是保存文本(因此它可用于操作)并使隐藏元素在正确位置可见。

如果您想尝试对他们的代码进行修订工程，请查看开发工具的源代码选项卡。他们有 3 个 js 文件，其中 2 个包含对此元素的引用。

以防万一你觉得懒惰，你可以使用 selection sharer library .