Какой лучший способ создать поповер для каждого слова в параграфе на dblclick? (HTML / CSS / Bootstrap4 / JQuery) - PullRequest
Новая
       5

Какой лучший способ создать поповер для каждого слова в параграфе на dblclick? (HTML / CSS / Bootstrap4 / JQuery)

0 голосов
/ 14 февраля 2020

Я пытаюсь создать что-то похожее на функцию Word Wise от Kindle и словарь MacOS для класса. Моя цель - позволить пользователю дважды щелкнуть слово и просмотреть его определение. Я очень новичок в программировании внешнего интерфейса, поэтому у меня было много проблем. Я старался изо всех сил исследовать и пробовать разные методы, чтобы достичь желаемого конечного результата, но я не могу заставить его работать.

Таким образом, в принципе, каждый раз, когда пользователь дважды щелкает слово, должен появиться всплывающее окно с его определением. Я хотел найти способ создания всплывающих окон для события щелчка, а не для жесткого кодирования в атрибуте 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>')
});
});
...