在Javascript字符串中使用Bootstrap的彈出式插件

Question

我想讓彈出式插件在Javascript字符串內工作。所以當用戶鼠標懸停geolocation時，彈出窗口就會出現，並且在鼠標被拿走時消失。

<script type="text/javascript"> 
    $('#directions-panel').text("We can't give you directions to our office as you don't have", <a href="#" rel="popover" data-content="Some content..." data-original-title="Some title..." > geolocation </a> " enabled on your browser. Enable geolocation and try again. The map above will show you where our office is located."); 
</script> 

而且使用這樣的調用？

$("[rel=popover]") 
    .popover({ 
     offset: 10 
    }) 
    .mouseover(function(e) { 
     e.preventDefault() 
    }) 

我知道這是有點全地方，但我已經四處搜尋，找不到任何類似於我想做的事情。我確信它可以完成，任何人都指向正確的方向？

編輯：

我知道有聯繫頁面如下：

<div id="directions-panel"> 
     <div id="directions-error-message" style="visibility:hidden"> 
      We can't give you directions to our office as you don't have <a href="#" id="geoloc-popover" rel="popover" data-content="Some content..." data-original-title="Some title..." > geolocation </a> enabled on your browser. Enable geolocation and try again. The map above will show you where our office is located. 
     </div> 
</div> 

和DIV directions-error-message變得可見，當下面的JS function failure()火災：

function failure() { 
     alert("Your browser does not have geolocation enabled so we can't give you directions to our office. Enable geolocation and try again, or consult the map for our address."); 
     $("#directions-error-message").css({ 
      visibility: 'visible' 
     });  
     var destMapOptions = { 
      zoom:15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: new google.maps.LatLng(ourLocation.lat, ourLocation.lng) 
     } 
     map = new google.maps.Map(document.getElementById("map-canvas"), destMapOptions); 
     marker = new google.maps.Marker({ 
      position: ourLatLng, 
      map: map, 
      draggable: false, 
      animation: google.maps.Animation.DROP, 
      title: "Hello" 
     }); 
     google.maps.event.addListener(marker, 'click', toggleBounce); 
    } 


    $(function() { 
     $('#directions-error-message').popover({ 
      selector: '[rel="popover"]', 
      trigger: 'hover' 
     }); 
    }) 

是否有辦法只需在directions-error-message DIV觸發彈出窗口中的「地理定位」？

Answer 1

爲什麼不嘗試這樣的事情，而不是：

<div style="visibility:hidden"> 
    We can't give you directions to our office as you don't have", <a href="#" rel="popover" data-content="Some content..." data-original-title="Some title..." > geolocation </a> " enabled on your browser. Enable geolocation and try again. The map above will show you where our office is located. 
</div> 

然後換用JavaScript的div的可見性。這樣jQuery設置標題就可以識別鏈接，但用戶直到你想要它時纔會看到它。

Answer 2

Twitter Bootstrap's Popover plugin確實有一個選項來啓用其data-api來觸發切換彈出。啓用它將使所有動態添加的元素具有正確的標記工作，而無需JavaScript中的進一步初始化調用。

該功能在默認情況主要是因爲訂閱所有頁面上的的mouseenter和鼠標離開事件可能會造成性能問題（這是在TBS < 2.1默認）禁用。如果您可以保持激活區域的相對特定性，您應該表現良好。

要啓用它只是爲#directions-panel上懸停，語法是：

$('#directions-panel').popover({selector: '[rel="popover"]', trigger: 'hover'}); 

所有後續更新，其中包括popovers那麼將是默認的活動面板。