Javascript 什么'；在dblclick上为段落中的每个单词创建一个popover的最佳方法是什么？（HTML/CSS/Bootstrap4/JQuery）

我正在尝试为一个类创建类似Kindle的Word Wise和MacOS的Dictionary功能的东西。我的目标是允许用户双击一个单词并查看其定义。我对前端编程非常陌生，所以我遇到了很多麻烦。我尽我最大的努力去研究和尝试不同的方法来达到我想要的最终结果，但我似乎无法让它发挥作用

因此，基本上，每次用户双击一个单词时，就会出现一个带有其定义的弹出框。我想找到一种在点击事件中创建弹出框的方法，而不是对每个单词的“弹出框”属性进行硬编码

编辑：更详细地解释一下……如果这是一个如何在元素上添加popover的示例：

<a href="#" data-container="body" 
data-toggle="popover" data-placement="top" data-content="Vivamus 
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</a>

…是否有一种方法可以对每个单词执行此操作，而不必为每个单词添加单独的元素和属性

这是我目前掌握的代码

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

函数getSelectedText（）{ var selectedText=''； if（window.getSelection） selectedText=window.getSelection（）； 返回所选文本； } $（文档）.ready（函数（） { $（函数（）{ $（'[data toggle=“tooltip”]'）。tooltip（） }) $（函数（）{ $（'[data toggle=“popover”]'）。popover（） }) $（'#可选'）。打开（“dblclick”，函数（）{ $（'.selection'）.text（getSelectedText（））； $（'.is selected'）.text（getSelectedText（）！=“”）； }); $（'#可选'）。在（'单击'）上，函数（e）{ var text=getSelectedText（）；

---

$（'#可选：包含（文本）'）。替换为（'你的问题是如何使用？还是如何发出获取定义的请求？@PatrickQ我的问题是如何让每个单词都有一个引导弹出窗口，而不必为div中的每个单词添加属性。你的内容是由PHP填充的还是静态/硬编码的HTML？@PatrickQ它在PHP文件上。。。页眉和页脚是php，但正文（大部分内容）是硬编码的html。那么，如果“单词”的定义是由空格分隔的文本，那么我会说看看函数。对文本块运行该函数，传递一个空格作为分隔符。然后循环生成的数组，包装每个“单词”使用添加工具提示所需的标记，在执行操作时附加到新字符串（将成为新的内容块）。