Qual è il modo migliore per creare un popover per ogni singola parola in un paragrafo sulla DoppioClic? (HTML / CSS / Bootstrap4 / JQuery)

voti
0

Sto cercando di creare qualcosa di simile a Kindle di Word Wise e funzione Dizionario di MacOS per una classe. Il mio obiettivo è quello di permettere all'utente doppio click su una parola e vedere la sua definizione. Sono molto nuovo alla programmazione front-end così ho avuto un sacco di problemi. Ho fatto del mio meglio per la ricerca e provare diversi metodi per raggiungere il mio risultato finale desiderato, ma io non riesco a farlo funzionare.

Quindi, in pratica, ogni utente un tempo doppio click su una parola, un popover dovrebbero apparire con la sua definizione. Volevo trovare un modo per creare popovers su un evento click, piuttosto che duro codifica l'attributo popover per ogni parola.

Questo è il codice che ho finora.

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>')
});
});
È pubblicato 14/02/2020 alle 00:05
fonte dall'utente
In altre lingue...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more