Показать Popover на выделение текста

Question

Я пытаюсь разработать расширение, которое отображает некоторую информацию во всплывающем окне при выделении текста.

ТОЧНО похоже на то, как расширение словаря Google Chrome.

Как динамически добавлять поповерпо выделенному тексту?

Вот что я пробовал.Но я хочу подобное, как Google Dictionary Popover.

content.css

.selection_bubble {
  position: absolute;
  font-family: arial;
  font-size: 1.1em;
  background: #a53d38;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
  z-index:4;
  display: none;
}

content.css

.selection_bubble {
  position: absolute;
  font-family: arial;
  font-size: 1.1em;
  background: #a53d38;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
  z-index:4;
  display: none;
}


content.js

// Add bubble to the top of the page.
var bubbleDOM = document.createElement('div');
bubbleDOM.setAttribute('class', 'selection_bubble shadow');
document.body.appendChild(bubbleDOM);

document.addEventListener('mouseup', function (e) {
  var selection = window.getSelection().toString();

  s = window.getSelection();
  oRange = s.getRangeAt(0); //get the text range
  oRect = oRange.getBoundingClientRect();

renderBubble(e.clientX, e.clientY, 'Loading....');

});

function renderBubble(mouseX, mouseY, selection) {
    var top  = window.pageYOffset || document.documentElement.scrollTop,
    left = window.pageXOffset || document.documentElement.scrollLeft;

    bubbleDOM.innerHTML = selection;
  bubbleDOM.style.top = top + mouseY - 220 + 'px';
    bubbleDOM.style.left = left + mouseX - 140 + 'px';
    bubbleDOM.style.display = 'inline-block';
}

Это показывает пузырь, но это не является удовлетворительным.Я хочу, чтобы пузырь отображался точно сверху или снизу в зависимости от области просмотра выделенного текста.

Любая помощь / предложение будет отличной помощью.

Спасибо.