Как отобразить popover поверх текстового поля

Question

Я никогда не работаю над этими типами вещей.

У меня есть textField в моем html-файле page.it ниже.

<div class="span4 mr1 shelflifeDiv"> 
     <input type="text" id="shelfLifeField" name="Shelf Life" placeholder="Shelf Life" class="po1 pull-right" data-toggle="popover" data-placement="bottom" data-html=true data-trigger="click" data-content> 
    </div> 

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

<script id="shelflifePopover" type="text/x-handlebars-template"> 
    <div class='row-fluid'> 
      <div class='span8'><span>Maximum Time</span></div> 
      <div class='span8'><input type='text' id='po1_maxtime' placeholder='Shelf life' class='mr2' disabled></div> 
    </div> 
</script> 

он сказал, всякий раз, когда вы хотите сделать поповер поверх TextField, просто добавьте код шаблона в атрибуте TextField data-content.

По его предложению, используя setAttribute Я приложил этот код шаблона, когда поле находится в состоянии фокусировки.

Если курсор из текстового поля, я хочу удалить (скрыть) popover поверх textField.

Я попытался добавить шаблон кода к атрибуту data-content, но он не работает.

var ele=document.getElementById("shelfLifeField"); 
//I compiled template code and assigned to compileCode variable. 
ele.setAttribute("data-content",compileCode); 

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

Благодаря

Answer 1

вы можете использовать следующий код JQuery, чтобы показать самозагрузки поповер, пожалуйста увидеть рабочий fiddle здесь

$(function() { 
       var showPopover = function() { 
        $(this).popover('show'); 
       } 
       , hidePopover = function() { 
        $(this).popover('hide'); 
       }; 

       $('#fb').popover({ 
        content: 'Facebook', 
        trigger: 'hover', 
        placement:'top' 
       }) 
      $('#tw').popover({ 
        content: 'Twitter', 
        trigger: 'hover', 
        placement:'top' 
       }) 
      $('#tb').popover({ 
        content: 'tumblr', 
        trigger: 'hover', 
        placement:'top' 
       }) 
      $('#fl').popover({ 
        content: 'flickr', 
        trigger: 'hover', 
        placement:'top' 
       }) 
      $('#yt').popover({ 
        content: 'youtube', 
        trigger: 'hover', 
        placement:'top' 
       })    
       .focus(showPopover) 
       .blur(hidePopover) 
       .hover(showPopover, hidePopover); 
      });