How to enable div to appear over the selected text?

I am creating an application using VueJS to generate a tooltip over user selected text. I want to show the tooltip exactly over the user selected text. I am using to Tippy.js to create the tooltip

Here is the code:

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 250px;

const giphy = require('giphy-api')('Here goes the API key');

export default {
  data () {
    return {

  mounted() {
    const template = document.querySelector('#template');
    const initialText = template.textContent;
    let that = this;

    const tip = tippy('.tip', {
      animation: 'shift-toward',
      arrow: true,
      html: '#template',
      trigger: 'click',
      onShow() {
        // `this` inside callbacks refers to the popper element
        const content = this.querySelector('.tippy-content');
        if(tip.loading || content.innerHTML !== initialText) 
        tip.loading = true;

        var self = that;
        $('#app').mouseup(function() {
          let selection = self.getSelected();

          if (selection != "") {

            .then(function (response) {
              // Assigning the url from response object to the url
              const url =;
              content.innerHTML = `<img width="100" height="100" src="${url}">`
              tip.loading = false
              content.innerHTML = 'Loading failed'
              tip.loading = false


      onHidden() {
        const content = this.querySelector('.tippy-content');
        content.innerHTML = initialText;


  methods: {
    // Function to get the selected text
    getSelected() {
      let selectedText = "", selection;
      if (window.getSelection) {
        selectedText = "" + window.getSelection();
      else if ( (selection = document.selection) && selection.type == "Text") {
        selectedText = selection.createRange().text;
      return selectedText;

<script src=""></script>
<script src=""></script>
<div id="app">
    <div class="tip">
      <h1>Fifa World Cup 2018</h1>
      <h4 style="margin-top:40px;">Winner is France</h4>
      <span style="margin-top:10px;">Runner up is Croatia</span>

      <div id="template" style="display: none">
        Loading tooltip...


The div with id=“template” is the div that forms the tooltip. So far, I have only managed to make it appear at the center of the div in which the text is present. How can I make sure the tooltip appears exactly above the selected text? Can someone please help me out here?

See if this works for you:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.