如何在没有包装的情况下创建文本选择工具提示？ [英] How to create tooltip over text selection without wrapping?

问题描述

我的最终目标是通过文本选择创建工具提示。用户将能够与类似于的工具提示进行交互。请注意，我能够通过将选定的文本包装到标记中，然后在其上创建工具提示来实现此目的，但由于其他要求和功能问题，这不再是我的选择。如果您注意到元素检查器中的上图中所选文本未包含任何类型的标签，则工具提示仅在选定内容上创建。我已经查看了这个，它对我不起作用，因为鼠标位置可能不对与选择结束时相同。我需要实际的选择位置。

一般问题：完成此操作的最佳方法是什么？
更具体的问题：

• 我应该使用选择的坐标吗？如果是的话，有一种方法可以获得矩形选区顶角的坐标，以便我可以找到中点并创建一个工具提示。


• 有没有办法获得选择作为一个元素？所以我可以放置一个工具提示？ （注意选择可以是多个节点）

解决方案

假设选择了某些东西

  var selection = window.getSelection（），//得到选择然后
 range = selection.getRangeAt（0），//第一个选择组的范围
 rect = range.getBoundingClientRect（）; //并将其转换为有用的数据
  

rect 现在是一个 Object ，它保存相对于 Window 的当前滚动坐标的位置。有关此 此处 。如果你想更加精确，你可以使用 getClientRects ，它返回一个这样的对象列表，然后你必须把它放在一起形成选择的区域。

现在，围绕它绘制一个框（我将使用 fixed $ b

  var div = document.createElement（'div'）; // make box 
 div.style.border ='2px solid black'; //带大纲
 div.style.position ='fixed'; //固定位置=简易模式
 div.style.top = rect.top +'px'; //设置坐标
 div.style.left = rect.left +'px'; 
 div.style.height = rect.height +'px'; //和大小
 div.style.width = rect.width +'px'; 
 document.body.appendChild（div）; //最后追加
  

您可能需要考虑滚动位置，以便您可以使用绝对定位。如果没有其他的可滚动元素，这意味着你只需要考虑 window.scrollX 和 window.scrollY ，它们是访问它们时窗口的 x 和 y 坐标的位置（以像素为单位）。

  var div = null; function drawBorderAroundSelection（）{var selection = window.getSelection（），// get然后选择范围= selection.getRangeAt（0），//第一个选择组的范围rect = range.getBoundingClientRect（）; //并将其转换为有用的数据if（rect.width> 0）{if（div）{div.parentNode.removeChild（div）; } div = document.createElement（'div'）; // make box div.class ='rect'; div.style.border ='2px纯黑'; //用轮廓div.style.position ='fixed'; //固定位置=简单模式div.style.top = rect.top +'px'; //设置坐标div.style.left = rect.left +'px'; div.style.height = rect.height +'px'; //和大小div.style.width = rect.width +'px'; document.body.appendChild（DIV）; // finally append}} window.onmouseup = drawBorderAroundSelection;  

  < p为H. Lorem ipsum dolor坐着，精神上的精神。 Donec ut dolor porta neque vulputate auctor et a ligula。 Quisque bibendum risus magna，eget feugiat erat faucibus sed。 Phasellus sed massa elementum，laoreet ipsum non，dignissim orci。 Aenean lobortis nunc et purus molestie，vel consectetur ligula dapibus。在ut lorem mattis，商品nisi aliquam，波塔安特。 Curabitur坐amet自由sed justo finibus porttitor。 Donec ac est ultrices，pretium diam sed，blandit nunc。 Morbi consequat finibus augue veligtricies。 Vestibulum efficitur antevitae cursus accumsan。前庭的前庭，一个egestas nisi malesuada eu。 Pellentesque fermentum，ante id convallis luctus，tellus lectus viverra diam，sit amet convallis ligula lorem sit amet neque。< / p>  

My end goal is to create a tooltip over a text selection. The user will then be able to interact with the tooltip similar to . Please note that I was able to accomplish this by wrapping selected text in a tag and then creating the tooltip on it however this is no longer an option for me due to some other requirements and functionality issues. If you notice in the image above in element inspector, the selected text is not wrapped in any kind of tag, the tooltip is just created over the selection. I have already looked at this and it will not work for me because mouse position may not be the same as the end of selection. I need the actual selection position.

General question: What is the best way to accomplish this? More specific questions:

• Should I be using the coordinates of the selection? If so is there a way to get the coordinates of the top corners of the rectangular selection so I can find the mid point and create a the tooltip over that.
• Is there a way to get that selection as an element? So I can just place a tooltip over that? (Note the selection can be multiple nodes)

解决方案

Assuming something selected

var selection = window.getSelection(),      // get the selection then
    range = selection.getRangeAt(0),        // the range at first selection group
    rect = range.getBoundingClientRect(); // and convert this to useful data

rect is now a Object which holds the positions relative the the current scroll coordinates of the Window. More info on this here. If you want to be even more precise, you can use getClientRects which returns a list of such Objects, which you would then have to put together to form the area of the selection.

Now, to draw a box around it (I'll take the easy route using fixed for demonstration purposes)

var div = document.createElement('div');   // make box
div.style.border = '2px solid black';      // with outline
div.style.position = 'fixed';              // fixed positioning = easy mode
div.style.top = rect.top + 'px';       // set coordinates
div.style.left = rect.left + 'px';
div.style.height = rect.height + 'px'; // and size
div.style.width = rect.width + 'px';
document.body.appendChild(div);            // finally append

You will probably want to take into consideration the scroll position so you can use absolute positioning. If there are no other scrollable elements, this means you just need to factor in the values of window.scrollX and window.scrollY, which are the position of the window's x and y coordinates in pixels at the time they're accessed.

var div = null;

function drawBorderAroundSelection() {
  var selection = window.getSelection(), // get the selection then
    range = selection.getRangeAt(0), // the range at first selection group
    rect = range.getBoundingClientRect(); // and convert this to useful data

  if (rect.width > 0) {
    if (div) {
      div.parentNode.removeChild(div);
    }
    div = document.createElement('div'); // make box
    div.class = 'rect';
    div.style.border = '2px solid black'; // with outline
    div.style.position = 'fixed'; // fixed positioning = easy mode
    div.style.top = rect.top + 'px'; // set coordinates
    div.style.left = rect.left + 'px';
    div.style.height = rect.height + 'px'; // and size
    div.style.width = rect.width + 'px';
    document.body.appendChild(div); // finally append
  }
}

window.onmouseup = drawBorderAroundSelection;

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dolor porta neque vulputate auctor et a ligula. Quisque bibendum risus magna, eget feugiat erat faucibus sed. Phasellus sed massa elementum, laoreet ipsum non, dignissim orci. Aenean lobortis
  nunc et purus molestie, vel consectetur ligula dapibus. In ut lorem mattis, commodo nisi aliquam, porta ante. Curabitur sit amet libero sed justo finibus porttitor. Donec ac est ultrices, pretium diam sed, blandit nunc. Morbi consequat finibus augue
  vel ultricies. Vestibulum efficitur ante vitae cursus accumsan. Vestibulum rutrum ex ex, a egestas nisi malesuada eu. Pellentesque fermentum, ante id convallis luctus, tellus lectus viverra diam, sit amet convallis ligula lorem sit amet neque.
</p>

这篇关于如何在没有包装的情况下创建文本选择工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！