如何向Bootstrap popover添加交互式内容？

Question

我有一个显示大amMap的网站。地图不需要一直可见，所以我想隐藏地图，只在用户点击按钮时显示它。 Bootstrap的popover似乎是处理这个问题的完美方式。

这是基本想法：

<button id="mapbutton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right">Map</button>
<div id="mapcontent" style="display: none;">
    <div id="map" style="width: 500px; height: 500px;"></div>
</div>

$(function() {
    $('#mapbutton').popover({
        html: true,
        content: function() {
            return $('#mapcontent').html();
        }
    });
});

这就是我所看到的：

我有两个问题：

1. 显示的地图不是互动的。我无法点击它。它看起来像一张静态画面。我不确定如何让它互动。 popover options看起来都没有解决交互性问题。
2. 工具提示窗口无法正确缩放。我猜这里有一些我需要做的CSS来解决这个问题。

我该如何解决这些问题？

Answer 1

问题1

使用事件shown.bs.popover：

加载popover内容后绑定事件

    $('#mapbutton').on('shown.bs.popover', function () {
        $('#mapMinus').click(MyMap.ZoomOut);
        $('#mapPlus').click(MyMap.ZoomIn);
        $('#mapLeft').click(MyMap.GoLeft);        
        [...]
    }) 

**更新：

通过重用bootstrap类来创建自己的“popover”：

<a id="mypopover">
    Lorem Ipsum    
</a>
<div id="popoverContent" class="popover fade bottom in">
    <div class="arrow" style="left: 9.375%;"></div>
    <div class="popover-content">
        <a id="clickmewouldntwork">Event: Click me! (after load page, not binding after popover)</a>
        <div id="gotit"></div>
    </div>
</div>

CSS：

.popover {
    max-width: none;
    top: 20px;
}

JS：

$('#clickmewouldntwork').click(function(){
    $('#gotit').append('#');
});

$('#mypopover').click(function(){
    var $target = $('#popoverContent');
    $target.toggle(!$target.is(':visible'));
});

See fiddle

问题2

你必须覆盖bootstrap .popover { max-width: 276px; }：

     .popover {
          max-width: none;
     }

See fiddle