Заставьте загрузчик работать с пользовательским шаблоном HTML

Question

Я использую текстовое поле группы ввода, и мне нужен всплывающий элемент Bootstrap 3 для работы, а шаблон всплывающего окна должен быть определен и спроектирован мной. Итак, HTML-код, который у меня сейчас есть:

<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>

Я хочу, чтобы всплывающее окно открывалось при щелчке значка группы ввода. В этом случае при щелчке по промежутку с классом glyphicon-time всплывающее окно отображается или отображается со следующим HTML:

<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 написано:

$(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
    });
});

Смотрите скрипку здесь: http://www.bootply.com/4fMzxGRpik

Может кто-нибудь, пожалуйста, помогите мне исправить, какую ошибку я делаю и что нужно сделать, чтобы отобразить всплывающее окно.

Answer 1

Вам не хватает содержимого поповера, вам нужно что-то вроде этого

$(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
    });
});

Рабочая демонстрация

Answer 2

Я бы предпочел иметь весь HTML в шаблонах. Это выглядит так:

Что-то в javascripts

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

И в шаблонах HTML

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

Answer 3

@code-jaff, это отличный ответ, но я заметил, что всплывающее окно рабочей демоверсии не похоже на то, что оно выходит из кнопки. Если это происходит с кем-то еще, попробуйте добавить параметр container: 'body' в параметры popover. Как это:

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

Answer 4

Я хочу попробовать минимальную конфигурацию и не хочу разделять код на JS и HTML. И вот мое решение.

Вот что я нашел,

Bootstrap Version 4.5.2 Добавлен popper js

Поместите свой код в атрибут содержимого данных.

Вот мой HTML-код

      <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>

Вот мой код JS

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