Realizza il popover bootstrap con template html personalizzato

Question

Sto utilizzando una casella di testo di gruppo di input e ho bisogno del popover di Bootstrap 3 per funzionare e il modello di popover deve essere definito da & n. Così l'html che ho attualmente con me è:

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

Voglio un popover per aprire quando l'icona del gruppo di ingresso è clic. In questo caso, quando la durata alla classe glyphicon tempo si fa clic su un popover è o visualizzate con il seguente codice 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 scritto:

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

Vedere il violino qui: http://www.bootply.com/4fMzxGRpik

Qualcuno può aiutarmi a correggere l'errore che sto facendo e cosa deve essere fatto per visualizzare un popvhover.

Answer 1

vi manca il contenuto del popover, avrete bisogno di qualcosa di simile

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

Working demo

Answer 2

@ code-Jaff che è una grande risposta, ma ho notato che popover del demo funzionante non sembra che stia uscendo dal pulsante. Se ciò accade a qualcun altro, prova ad aggiungere il contenitore: 'body' alle opzioni del popover. Come questo:

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