如何在选择中添加工具提示？答案

【问题标题】：How to add a tooltip to a selection?如何在选择中添加工具提示？
【发布时间】：2021-10-23 04:08:54
【问题描述】：

当用户选择一些文本时，我希望能够在所选文本的正下方显示一个工具提示？有什么想法我该怎么做？

【问题讨论】：

这个答案here 可能会给你一些想法。

标签： draftjs draft-js-plugins react-draft-wysiwyg

【解决方案1】：

您可以添加一个创建工具提示的组件，例如 paper-tooltip，或者创建一个，即使仅使用 css，也取决于您的用例。

Here is a W3 example of a CSS tooltip

【讨论】：

【解决方案2】：

据我所知，react-draft-wysiwyg 不像 draft-js-plugins 那样支持 arbitrary plugins。

在NPM上搜索，我发现唯一一个文本选择相关的插件是draft-js-delete-selection-plugin。您可以以此为起点，并查看SelectionState 的文档。

【讨论】：

【解决方案3】：

不知道您目前拥有什么，很难提供更多信息。我创建了一个 JS fiddle，它显示了一个带有事件侦听器的简单工具提示，该事件侦听器通过元素 id 获取选定的文本 https://jsfiddle.net/03Lu28qb/1/

$(document).ready(function () {
  const textSelectionTooltipContainer = document.createElement("div");
  textSelectionTooltipContainer.setAttribute(
   "id",
   "textSelectionTooltipContainer"
 );
textSelectionTooltipContainer.innerHTML = `<p id="textSelected">Selected! </p>`;
const bodyElement = document.getElementsByTagName("BODY")[0];


bodyElement.addEventListener("mouseup", function (e) {
  var textu = document.getSelection().toString();
  if (!textu.length) {
  textSelectionTooltipContainer.remove();
}
});

document
 .getElementById("textToSelect")
 .addEventListener("mouseup", function (e) {
  let textu = document.getSelection().toString();
  let matchu = /\r|\n/.exec(textu);
  if (textu.length && !matchu) {
    let range = document.getSelection().getRangeAt(0);
    rect = range.getBoundingClientRect();
    scrollPosition = $(window).scrollTop();
    containerTop = scrollPosition + rect.top - 50 + "px";
    containerLeft = rect.left + rect.width / 2 - 50 + "px";
    textSelectionTooltipContainer.style.transform =
      "translate3d(" + containerLeft + "," + containerTop + "," + "0px)";
    bodyElement.appendChild(textSelectionTooltipContainer);
   }
 });
});

【讨论】：

【解决方案4】：

如果您尝试在 react 中这样做，请尝试 this。如果您尝试在 js 中执行此操作，请尝试 this。

【讨论】：