Javascript 如何重新创建中高光功能？

关于如何在media.com上创建突出显示功能，我找不到任何资源

澄清：

当你在文章中突出显示所选的词语时，会弹出一个小的工具提示，可以选择在推特上或评论你所突出显示的词语

以下是一个屏幕截图：

我完全不知道如何实现这一点，因此我没有任何代码可供提供（而且我无法从media.com源代码中找到）

如果您对如何做到这一点有任何想法，请与我们分享

---

谢谢，汤姆

看看这把小提琴：

并使用以下代码：

$(".tiptext").mouseover(function() {
    $(this).children(".description").show();
}).mouseout(function() {
    $(this).children(".description").hide();
});

或者您可以使用jquery工具提示：

---

尝试在github上查看。这与media.com博客上发生的事情类似，但需要做一些工作才能实现您的目标。

第一步是获得用户的选择。这可以通过

window.getSelection（）

完成

然后，您需要在此选择的位置上创建一个粘性工具提示（您可以通过获取元素的

元素.offsetLeft

，

元素.offsetTop

来找到）。 然后，您需要挂接一个注释系统，该系统存储与选择的关系（例如，通过使用span和ID包装选择并打开编辑器）

这只是你所问问题的基本介绍，稍微复杂一点，但也取决于你到底想用它做什么

---

希望有帮助！

可能对您有所帮助：回答如下：作为工具提示技术，这很好，但我不确定它如何解决获取用户选择的文本的问题。

var getSelectedText = function () {
  var selectedText = '';

  if (window.getSelection()) {
    selectedText = window.getSelection();
  } else if (document.getSelection()) {
    selectedText = document.getSelection();
  } else if (document.selection) {
    selectedText = document.selection.createRange().text;
  }

  return selectedText;
};

window.addEventListener('mouseup', function () {
  var result = getSelectedText();

  // Now you can do whatever you want with your selected text 
});