¿Cuál es la mejor manera de crear un popover para cada una de las palabras en un párrafo sobre dblclick? (HTML / CSS / Bootstrap4 / jQuery)

Estoy tratando de crear algo similar a la palabra sabia de Kindle y de MacOS función de diccionario para una clase. Mi objetivo es permitir que el usuario hace doble clic sobre una palabra y ver su definición. Soy muy nuevo en la programación front-end, así que he estado teniendo un montón de problemas. Hice todo lo posible para investigar y probar diferentes métodos para lograr mi resultado final deseado, pero me parece que no puede conseguir que funcione.

Así que, básicamente, cada vez que un usuario hace doble clic en una palabra, un popover deben aparecer con su definición. Yo quería encontrar una manera de crear panecillos en un evento de clic, en lugar de codificar duro en el atributo popover para cada palabra.

Este es el código que tengo hasta ahora.

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>')
});
});