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