在javascript或bootstrap中创建可单击的工具提示

制作可点击工具提示的最佳方法是什么，如下图所示：

我应该使用bootstrap还是其他一些库？

谢谢。

Answer 1

干得好

$("#Pops").popover({ html: true, content: function () { return $('#popover-content').html(); } }); 

 [data-style=mypops] + .popover { background: #4194ca; } [data-style=mypops] + .popover.bottom .arrow:after { border-bottom-color: #4194ca; } [data-style=mypops] + .popover-content { } .popovermenu { list-style: none; padding: 0px; margin: 0px; } .popovermenu li { } .popovermenu li a { color: #fff; } 

    
 Click Me 
 
 
Action
 
Another action
 
Separated link
 
 
  

Answer 2

您可以使用Bootstrap的弹出窗口并使用模板选项在工具提示中包含可单击的链接。 关于工具提示的位置也有选项。

 $(function (){ $("#example").popover({ template: '
', placement: 'right' }); }); 

http://getbootstrap.com/javascript/#popovers-options

Answer 3

 $('[data-toggle="popover"]').popover({ trigger: "manual" , html: true, animation:false}) .on("mouseenter", function () { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 300); }); 

              
 
Popover Example
 test link