텍스트 필드 위에 팝업을 표시하는 방법

Question

나는 이런 유형의 작업을하지 않습니다.

내 HTML 페이지에 textField가 있습니다. 코드는 아래에 있습니다.

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

내 요구 사항은 해당 필드를 클릭하면, 나는 다음과 같은 템플릿에 대해,이 내 웹 디자이너, 팝 오버를 표시 할 것이다. 당신이에 textField 위에 팝 오버 렌더링 단지에 textField의 data-content 속성 템플릿 코드를 추가 할 때마다

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

그는 말했다.

그의 제안에 따르면, setAttribute을 사용하면 필드가 포커싱 상태 일 때 템플릿 코드를 추가했습니다.

커서가 텍스트 필드 밖에 있으면 textField 위에 popover를 제거 (숨기기)하고 싶습니다.

데이터 콘텐츠 속성에 템플릿 코드를 추가하려고했지만 작동하지 않습니다.

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

제발 도와주세요. 완전히 여기 붙어 있습니다.

감사

Answer 1

는 부트 스트랩 팝 오버를 보여주기 위해 다음과 같은 jQuery 코드를 사용할 수 있습니다, pls는 여기에 작업 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); 
      }); 

참조