javascript - 在 Javascript 字符串中使用 Bootstrap 的 popover 插件

Question

我正在尝试让弹出窗口插件在 Javascript 字符串内工作。因此，当用户将鼠标悬停在地理位置上时，弹出窗口将会出现，并在鼠标移开时消失。

<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 将识别该链接，但用户不会看到它，除非您希望他们看到。