jquery - example - popover bootstrap ejemplo

Hacer que bootstrap popover funcione con una plantilla html personalizada

Question

Estoy usando un cuadro de texto de grupo de entrada y necesito que el popover Bootstrap 3 funcione y la plantilla popover debe ser definida y diseñada por mí. Entonces el html que tengo actualmente es:

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

Quiero que se abra un popover cuando haga clic en el icono del grupo de entrada. En este caso, cuando se hace clic en el lapso con clase glyphicon-time, se muestra un popover con el siguiente 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 escrito:

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

Vea el violín aquí: http://www.bootply.com/4fMzxGRpik

¿Alguien puede por favor ayudarme a corregir el error que estoy haciendo y qué se debe hacer para mostrar una popvhover?

Answer 1

te estás perdiendo el contenido del popover, necesitarás algo como esto

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

Demostración de trabajo

Answer 2

@ code-jaff es una gran respuesta, pero noté que el popover de la Demo de trabajo no parece salir del botón. Si esto le sucede a alguien más, intente agregar contenedor: ''cuerpo'' a las opciones de popover. Me gusta esto:

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