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

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>

当以下 JS function failure() 触发时，DIV directions-error-message 可见:

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 中的“geolocation”触发弹出框？

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