來自選擇僞選擇器的工具提示

Question

在Medium.com網站我想知道當雙擊單詞或句子以顯示共享，編輯和其他東西的工具提示時，工具提示是如何演變的。

Answer 1

的代碼已經過壓縮，但我想它做的方法如下： 一個隱藏的元素被添加到頁面。使用chrome開發工具，我設法看到它的類是'buttonset - highlightmenu'。

將dblclick的事件偵聽器添加到頁面。事件處理程序記錄點擊的位置。然後超時後，它會獲得選定的範圍（使用window.getSelection）。下一個詞幹是保存文本（因此它可以用於動作），並使隱藏的元素在正確的位置可見。

如果您想嘗試rev-engineer他們的代碼，請查看開發工具，sources選項卡。他們有3個js文件，其中2個包含對這個元素的引用。

爲防萬一您感到懶惰，您可以使用selection sharer library。