How to add a tooltip to a selection?

Question

When the users selects some text, I want to be able to show a tooltip, right below the selected text? Any ideas how can I do that?

Answer 1

You could add a component that creates the tooltip, such as paper-tooltip, or create one, even with css only, depends on your usecase.

Here is a W3 example of a CSS tooltip

Answer 2

As far as I can tell, react-draft-wysiwyg does not support arbitrary plugins in the same way that draft-js-plugins does.

Searching on NPM, the only text selection related plugin I found is draft-js-delete-selection-plugin. You could use that as a starting point, as well as look at the documentation for SelectionState.

Answer 3

Without any idea of what you have so far it is hard to provide more info. I have created a JS fiddle that shows a simple tool tip with an event listener that gets the selected text by element 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);
   }
 });
});

Answer 4

If you trying to do it in react try this. If you trying to do it in js try this.