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''
});