Lassen Sie Bootstrap-Popover mit benutzerdefinierten HTML-Vorlagen funktionieren

Ich verwende ein Eingabegruppen-Textfeld und ich brauche das Popover von Bootstrap 3, um zu funktionieren, und die Popover-Vorlage sollte von mir definiert und entworfen werden. Also das HTML, das ich gerade bei mir habe, ist:

<div class="row">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control jq-timePicker" value="09:30">
                <span class="input-group-addon" rel="popover">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
</div>

Ich möchte, dass ein Popover geöffnet wird, wenn auf das Symbol der Eingabegruppe geklickt wird. Wenn in diesem Fall auf die Spanne mit der Klasse glyphicon-time geklickt wird, wird ein Popover oder mit folgendem HTML angezeigt:

<div class="timePickerWrapper popover">
            <div class="arrow"></div>
            <div class="popover-content">
                <div class="timePickerCanvas"></div>
                <div class="timePickerClock timePickerHours"></div>
                <div class="timePickerClock timePickerMinutes"></div>
            </div>
        </div>

JS geschrieben:

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '<div class="timePickerCanvas"></div>',
        '<div class="timePickerClock timePickerHours"></div>',
        '<div class="timePickerClock timePickerMinutes"></div>',
        '</div>',
        '</div>'].join('');


    $('body').popover({
        selector: '[rel=popover]',
        trigger: 'click',
        template: popoverTemplate,
        placement: "bottom",
        html: true
    });
});

Sehen Sie die Geige hier: http://www.bootply.com/4fMzxGRpik

Kann mir bitte jemand helfen, den Fehler zu korrigieren, den ich mache und was getan werden muss, um einen Popvhover anzuzeigen.

Ihnen fehlt der Inhalt des Popovers, Sie brauchen so etwas

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '</div>',
        '</div>'].join('');

    var content = ['<div class="timePickerCanvas">asfaf asfsadf</div>',
        '<div class="timePickerClock timePickerHours">asdf asdfasf</div>',
        '<div class="timePickerClock timePickerMinutes"> asfa </div>', ].join('');


    $('body').popover({
        selector: '[rel=popover]',
        trigger: 'click',
        content: content,
        template: popoverTemplate,
        placement: "bottom",
        html: true
    });
});

Arbeitsdemo

Ich würde es vorziehen, den gesamten HTML-Code in Vorlagen zu haben. Es geht so:

Etwas in Javascript

$(".btn").popover({
   template: $("#selector").html(),
   placement: "auto"
});

Und im HTML-Format

<div id="selector">
    Anything you want in your popovers, either dynamic or static
<div>

@code-jaff das ist eine großartige Antwort, aber mir ist aufgefallen, dass das Popover der Arbeitsdemo nicht so aussieht, als würde es aus der Schaltfläche kommen. Wenn dies bei anderen passiert, versuchen Sie, container: ‘body’ zu den Popover-Optionen hinzuzufügen. So was:

$('body').popover({
    selector: '[rel=popover]',
    trigger: 'click',
    content: content,
    template: popoverTemplate,
    placement: "bottom",
    html: true,
    container: 'body'
});

Was ich versuchen möchte, ist eine minimale Konfiguration und möchte den Code nicht in JS und HTML aufteilen. Und hier ist meine Lösung.

Hier was ich gefunden habe,

Bootstrap Version 4.5.2 Popper js hinzugefügt

Fügen Sie Ihren Code in das data-content-Attribut ein.

Hier ist mein HTML-Code

<a tabindex="0" html="true" class="btn btn-sm" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And heres some <b>amazing content</b>. Its very engaging. Right?">Dismissible popover</a>

Hier ist mein JS-Code

 $('[data-toggle="popover"]').popover({
    html : true
 });