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 Tippy.js to create the tooltip

Here is the code:

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) 
          return;
        
        tip.loading = true;

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

          if (selection != "") {

            giphy.translate(`${selection}`)
            .then(function (response) {
              // Assigning the url from response object to the url
              const url = response.data.images.fixed_width_small.url;
              content.innerHTML = `<img width="100" height="100" src="${url}">`
              tip.loading = false
            })
            .catch(function(error){
              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;
    }

  }
#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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>

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

  </div>

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?

23 thoughts on “How to enable div to appear over the selected text?”

  1. 632131 490408You produced some decent points there. I looked online for your issue and located a lot of people will go together with with the web site. 794713

    Reply
  2. Usually I don’t read article on blogs, but I would like to say
    that this write-up very forced me to try and do
    it! Your writing taste has been surprised me. Thanks, quite
    nice post.

    Reply
  3. You actually make it seem really easy together with your presentation however I to find this
    topic to be really one thing that I feel
    I’d by no means understand. It seems too complicated and very large for me.
    I am taking a look ahead in your subsequent publish, I will
    attempt to get the dangle of it!

    Reply
  4. An outstanding share! I’ve just forwarded this onto a friend who had been doing a
    little research on this. And he in fact bought me lunch
    simply because I found it for him… lol. So let me reword this….
    Thanks for the meal!! But yeah, thanks for spending the time to talk about this topic here on your web page.

    Reply
  5. Do you mind if I quote a couple of your articles as long as
    I provide credit and sources back to your weblog? My website is in the very same niche as yours
    and my visitors would really benefit from some of the information you provide here.
    Please let me know if this alright with you. Cheers!

    Reply
  6. That is very fascinating, You are an excessively professional blogger.
    I have joined your rss feed and look forward to in search of extra
    of your wonderful post. Also, I have shared your web
    site in my social networks

    Reply
  7. Hi, i think that i saw you visited my blog thus i came to “return the favor”.I’m trying to find things to improve my web site!I suppose its
    ok to use some of your ideas!!

    Reply
  8. Hi! I қknow this is kind off off-topic butt I had to ask.
    Doеѕ building a well-establisheԀ blоg such as yoսrs take a mаssive amount work?

    I am completely new to writing a bloց but I do write
    in mmy diary on a daly baѕiѕ. I’d like to start a blog so I will be able to share
    my owԝn experіence and feelings online. Please let me қnow iff you have any rеcօmmendatiоns or tips for new aspiring bloggers.
    Appreciate it!

    Мy ebpage :: wongtoto

    Reply
  9. hey there and thank you forr your information – I have certainly picked up somsthing
    new frlm right here. I did however expertise several technical points sing this site, since I experienced to reload the webhsite a lot of times previous to
    I ciuld get it to lad correctly. I had been wondering if your web osting is OK?
    Not that I am complaining, buut slow loading
    instances ttimes will very frequently affect your plaement in google and can damage your high quality
    score iff ads and marketing with Adwords. Welll I am adding this RSS to my email and could look out for a lot more of your
    respective exciting content. Ensure that you update this again soon.

    Reply
  10. I blog quite often and I truly thank you for your information. This
    article has truly peaked my interest. I am going to book
    mark your website and keep checking for new details about once per week.
    I opted in for your Feed too.

    Reply