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

Using Bootstrap's popover plugin inside a Javascript string

本文关键字：字符串 popover 插件 Javascript Bootstrap 使用      更新时间：2023-09-26

我正试图让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>

并且DIV directions-error-message在以下JS CCD_

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中的"地理定位"触发popover？

为什么不试试这样的东西：

<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设置标题将识别链接，但用户直到你希望他们看到才看到。

Twitter Bootstrap的Popover插件确实有一个选项，可以启用其数据api来触发切换Popover。启用它将使所有具有适当标记的动态添加元素都能工作，而无需在JavaScript中进行进一步的初始化调用。

该功能在默认情况下被禁用，主要是因为订阅页面上的所有mouseenter和mouseleaf事件可能会带来性能问题（这是TBS<2.1中的默认设置）。如果您可以保持激活区域的相对特定性，那么您的性能应该很好。

为了只为悬停时的#directions-panel启用它，语法为：

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

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

相关文章：