Question

假设存在一个文本正文的情况。而且，在突出显示一个单词时，我想要一个弹出窗口显示工具提示位于突出显示的单词。

有点像mac如何显示下面的单词定义 - highlight example

这是一个angularjs应用程序，我正在使用angularui。因此，角度ui聚焦的解决方案将是优选的，但不是必需的。

提前致谢。

Answer 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>

如何将popover放在突出显示的文本部分上？

1 个答案: