Question

我正在尝试使popover插件在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 directions-error-message触发时，

和DIV 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 和 mouseleave 事件可能会导致性能问题（这是TBS中的默认值<2.1 ）。如果你可以保持激活区域相对具体，那么你应该在性能方面做得很好。

要在悬停时为#directions-panel启用它，语法为：

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

默认情况下，包含弹出窗口的所有后续面板更新都将处于活动状态。

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

2 个答案: