Was ist der beste Weg, um eine popover für jedes einzelnes Wort in einem Absatz auf dblclick zu schaffen? (HTML / CSS / Bootstrap4 / JQuery)

stimmen
0

Ich versuche, etwas ähnliches wie Kindle Wort Wise und MacOS Dictionary-Funktion für eine Klasse zu erstellen. Mein Ziel ist es, den Benutzer einen Doppelklick auf ein Wort und sehen ihre Definition zu ermöglichen. Ich bin sehr neu für Front-End-Programmierung so dass ich eine Menge Ärger mit habe. Ich habe versucht, mein Bestes zu erforschen und verschiedene Methoden zu versuchen, meine gewünschte Endergebnis zu erreichen, aber ich kann nicht scheinen, um es an die Arbeit zu machen.

Also im Grunde jedes Mal ein Benutzer doppelklickt auf ein Wort, sollte ein popover mit seiner Definition erscheinen. Ich wollte einen Weg finden, popovers auf einem Click-Ereignisse zu erstellen, anstatt hart für jedes Wort in dem popover Attribute Codierung.

Dies ist der Code, den ich bis jetzt haben.

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>')
});
});
Veröffentlicht am 14/02/2020 um 00:05
quelle vom benutzer
In anderen Sprachen...                            

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