twitter-bootstrap 在 javascript 或 bootstrap 中创建可点击的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33000298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 23:15:09 来源:igfitidea点击:
Creating a clickable tooltip in javascript or bootstrap
提问by cdub
What is the best way to make a clickable tooltip like the one in the picture below:
制作如下图所示的可点击工具提示的最佳方法是什么：
Should I use bootstrap or some other library?
我应该使用引导程序还是其他一些库？
Thanks.
谢谢。
回答by Shehary
Here You go
干得好
$("#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>Edit:
编辑：
- Added custom
data-style="mypops"in popover button and add in css so popover can be customized without effecting the default popover in bootstrap. - Replaced
data-trigger="click"withdata-trigger="focus"in popover button so if click one a link or outside the popover window, popover will be auto closed.
data-style="mypops"在弹出框按钮中添加自定义并添加 css，因此可以自定义弹出框而不影响引导程序中的默认弹出框。- 替换
data-trigger="click"为data-trigger="focus"弹出窗口按钮，因此如果单击一个链接或弹出窗口外部，弹出窗口将自动关闭。
回答by Charming ZooZoo
$('[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>回答by Lucas Rodrigues
You can use Bootstrap's popover and use the template option to include clickable links in your tooltip. There are also options regarding the tooltip's position.
您可以使用 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'
});
});
