如何将弹出框放置在突出显示的文本部分上？答案

【问题标题】：How to position popover over a highlighted portion of text?如何将弹出框放置在突出显示的文本部分上？
【发布时间】：2015-03-30 13:21:10
【问题描述】：

假设存在正文的这种情况。而且，在突出显示其中的一个单词时，我希望显示一个弹出框，其中工具提示位于突出显示的单词处。

有点像 mac 如何显示以下单词的定义 -

这是一个 angularjs 应用程序，正在使用 angularui。因此，以角度 ui 为重点的解决方案将是可取的，但不是必需的。

提前致谢。

【问题讨论】：

ui.bootstrap.popover 可能会有所帮助。
@showdev 已经使用它并让弹出框通过自定义触发器和所有内容处理元素。但是，将工具提示定位在突出显示的文本部分上似乎是不可能的（我想相信可能但不是微不足道的）。
我明白了。您介意将您尝试的代码添加到您的问题中，以便我们可以重现该问题吗？它可能有助于我们可视化您的问题并找到解决方案。

标签： javascript jquery css angularjs angular-ui

【解决方案1】：

你可以使用下面的代码来做你想做的事……祝你好运：

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <script>
    function getSelectedText() {
      var text = "";
      if (typeof window.getSelection != "undefined") {
        text = window.getSelection().toString();
      } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
        text = document.selection.createRange().text;
      }
      return text;
    }

    function doSomethingWithSelectedText() {
      var selectedText = getSelectedText();
      if (selectedText) {

        $('#infoDiv').css('display', 'block');
        $('#infoDiv').css('position', 'absolute');
        $('#infoDiv').css('left', event.clientX + 10);
        $('#infoDiv').css('top', event.clientY + 15);
      } else {
        $('#infoDiv').css('display', 'none');
      };
    };

    document.onmouseup = doSomethingWithSelectedText;
    document.onkeyup = doSomethingWithSelectedText;
  </script>
  <style>
    /*Tooltip div styling */
    .tooltipDiv {
      display: none;
      width: 250px;
      z-index: 101;
      background-color: #fff;
      border: 3px solid #666;
      padding: 12px 12px 12px 12px;
      border-radius: 0px 25px 0px 25px;
    }
  </style>

</head>

<body>
  <div id="infoDiv" class="tooltipDiv">This is where your will put whatever you like...</div>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>

</html>

【讨论】：