I am currently developing an application with VueJS that generates a tooltip over user-selected text. The goal is to position the tooltip directly above the selected text, utilizing Tippy.js for its creation.
Check out the code snippet below:
const giphy = require('giphy-api')('Insert API key here');
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" serves as the foundation for the tooltip. Currently, I have only achieved positioning it at the center of the text-containing div. Any tips on how to ensure the tooltip displays exactly above the selected text? Assistance would be greatly appreciated.