使用bootstrap创建弹出窗口

Question

我必须创建一个这样的弹出窗口：

然后，将其绑定到html元素并在将其悬停时显示。

我正在使用bootstrap，到目前为止我一直在尝试这个：

HTML：

<a data-toggle="uid-popover" class="od-icon info-icon clientreference-info-button cursor-pointer"></a>

使用Javascript：

var popoverTemplate = ['<div class="timePickerWrapper popover">',
    '<div class="arrow"></div>',
    '<div class="popover-content">',
    '</div>',
    '</div>'].join('');

    var content = ['<div>TEST</div>', ].join('');

    $('[data-toggle="uid-popover"]').popover({
        content: content,
        template: popoverTemplate,
        placement: "up",
        html: true
    });

我想知道是否可以在悬停项目前面找到弹出窗口，但是我无法做到，因为“placement”参数只接受“up，bottom，left，right”输入。

如果有任何其他方法可以使用或不使用bootstrap使弹出窗口更容易，我会非常感谢知道。

感谢。

Answer 1

您可以像下面一样手动设置它。请创建小提琴我无法插入链接也无法创建片段。

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<p>Click on button to see Popover</p>
<div style="width:200px; margin: 0 auto;">
<a href="#" id="example" class="btn btn-primary" rel="popover" data-content="This is the body of Popover"   data-original-title="Creativity Tuts">pop</a>
</div>


$(function () {
$('#example').popover();
$('#example').on("shown.bs.popover",function(e){
$(".arrow").hide();
var d = $(".popover")[0];
d.style.left = ((d.offsetLeft) - ($(".popover").width()/1.4)) + "px";
d.style.top = ((d.offsetTop) + ($(".popover").height()-15)) + "px";
})  
});