Javascript для всплывающей подсказки текста в мобильных браузерах

Question

Я хочу открыть всплывающую подсказку рядом с текстом, выбранным в мобильном браузере (например, Chrome в Android). Поскольку выделение текста в мобильных браузерах не вызывает события мыши, я не могу использовать mouseup событие.

document.addEventListener("selectionchange", function(event) {

    var text = window.getSelection().toString();
    var tooltip = document.getElementById('tooltip');
    var x = event.clientX; // The problem
    var y = event.clientY; // The Problem
    tooltip.innerHTML = text;
    tooltip.style.top = x + 'px';
    tooltip.style.left = y + 'px';
});

Проблема в том, что ClientX а также ClientY не работать с selectionchange,

Проверьте JSFiddle.

Answer 1

Вы можете получить ограничивающий прямоугольник выделения текста и разместить подсказку на основе этих данных. Прямоугольник скажет вам ширину, высоту, х, у, сверху, справа, снизу и слева от выделения.

document.addEventListener("selectionchange", function(event) {
  const selection = window.getSelection();
  
  if (selection.rangeCount === 0) {
    return;
  }

  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();
  const text = selection.toString();
  const tooltip = document.getElementById('tooltip');

  tooltip.innerHTML = text;
  tooltip.style.top = rect.bottom + 5 + 'px'; // 5px offset
  tooltip.style.left = rect.x + 5 + 'px';     // 5px offset
  tooltip.style.position = 'absolute';
  tooltip.style.background = 'lightgreen';
});

This is some text
<div id="tooltip">

Answer 2

Вы можете добавить событие mouseup и сделать этот код в обработчике события mouseup.

var tooltip = document.getElementById('tooltip');
document.addEventListener("selectionchange", function(event) {
    var text = window.getSelection().toString();
    tooltip.innerHTML = text;
});

document.addEventListener("mouseup", function(event){
    var x = -1000;
    var y = -1000;
    if(tooltip.innerHTML!=""){
        x =event.clientX;
        y = event.clientY;
    }
    tooltip.style.top = x + 'px';
    tooltip.style.left = y + 'px';
});

Я также проверил это на jsFiddler.