Qual é a melhor maneira de criar um popover para cada palavra em um parágrafo sobre dblclick? (HTML / CSS / Bootstrap4 / JQuery)

Eu estou tentando criar algo semelhante a palavra sábia do Kindle e recurso Dicionário de MacOS para uma classe. Meu objetivo é permitir que o usuário clicar duas vezes sobre uma palavra e ver sua definição. Eu sou muito novo para programação front-end para que eu tenho tido um monte de problemas. Eu tentei o meu melhor para pesquisar e tentar métodos diferentes para alcançar o meu resultado final desejado, mas eu não consigo fazê-lo funcionar.

Então, basicamente, a cada vez que um usuário clica duas vezes em uma palavra, um popover deve aparecer com a sua definição. Eu queria encontrar uma maneira de criar popovers em um evento de clique, em vez de disco rígido codificação no atributo popover para cada palavra.

Este é o código que tenho até agora.

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