[英]Creating a clickable tooltip in javascript or bootstrap
制作可点击工具提示的最佳方法是什么，如下图所示：
我应该使用bootstrap还是其他一些库？
谢谢。
干得好
$("#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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <div class="col-sm-4"> <button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-style="mypops" id="Pops">Click Me</button> <div id="popover-content" class="hide"> <ul class="popovermenu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Separated link</a></li> </ul> </div> </div>
编辑：
data-style="mypops"并添加了css，因此可以自定义data-style="mypops"而不影响bootstrap中的默认弹出窗口。 data-trigger="focus"替换data-trigger="click" ，这样如果单击一个链接或弹出窗口外，popover将自动关闭。 $('[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); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Popover Example</h3> <a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='https://www.w3schools.com' title='test add link'>link on content</a>" data-original-title="test title">test link</a> </div> </body> </html>
您可以使用Bootstrap的弹出窗口并使用模板选项在工具提示中包含可单击的链接。 还有关于工具提示位置的选项。
$(function (){
$("#example").popover({
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
placement: 'right'
});
});
使用javascript创建元素时无法使Bootstrap工具提示工作
[英]Can't make Bootstrap tooltip work when creating elements with javascript
bootstrap工具提示：如何使用javascript函数指定工具提示文本
[英]bootstrap tooltip: how to specify tooltip text using a javascript function
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.