Ποιος είναι ο καλύτερος τρόπος για να δημιουργήσετε ένα αναδυόμενο για το κάθε λέξη σε ένα σημείο για dblclick; (HTML / CSS / Bootstrap4 / JQuery)

Προσπαθώ να δημιουργήσει κάτι παρόμοιο με το Word Wise Kindle και το χαρακτηριστικό Λεξικό MacOS για μια τάξη. Στόχος μου είναι να επιτρέψει στο χρήστη διπλό κλικ σε μια λέξη και να δείτε τον ορισμό της. Είμαι πολύ νέα για να μπροστινό άκρο του προγραμματισμού έτσι έχω ήδη έχουν πολλά προβλήματα. Έχω δοκιμάσει το καλύτερό μου για να ερευνήσει και να δοκιμάσετε διάφορες μεθόδους για να επιτύχει επιθυμητό τελικό αποτέλεσμα μου, αλλά δεν μπορώ να φαίνεται να το πάμε στη δουλειά.

Έτσι, βασικά, κάθε φορά χρήστης διπλό κλικ σε μια λέξη, μια popover πρέπει να εμφανιστεί με τον ορισμό της. Ήθελα να βρω έναν τρόπο για να δημιουργήσετε popovers σε ένα συμβάν κλικ, όχι σκληρά κωδικοποίησης στο χαρακτηριστικό popover για κάθε λέξη.

Αυτός είναι ο κώδικας που έχω μέχρι τώρα.

function getSelectedText(){
    var selectedText = '';
        if (window.getSelection)
               selectedText = window.getSelection();
return selectedText;
}


$(document).ready(function()
{
  $(function () {
   $('[data-toggle=tooltip]').tooltip()
})

$(function () {
  $('[data-toggle=popover]').popover()
})

$('#selectable').on(dblclick, function () {
$('.selection').text(getSelectedText());
$('.is-selected').text(getSelectedText() != );
    });

$('#selectable').on('click',function (e) {
 var text= getSelectedText();
 $( '#selectable:contains(text)' ).replaceWith('<span data-toggle=popover data-placement=bottom data-content=testing popover>' + text +'</span>')
});
});