今天在项目中使用popover，用于提示一些信息，本文简单的记录一下
首先项目中要引用bootstrap的css和js，添加样式：
<style type="text/css">
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-size: 14px;
text-align: left;
text-align: start;
background-color: #428bca !important;
color:#fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}
.popover.top .arrow:after {
border-top-color: #428bca;
}
</style>后面的代码十分关键，将箭头的颜色变为和content相同的颜色
接着在input中添加下面的代码：
<input type="text" name="key" id="key" class="form-control" value="{$val}"
placeholder="输入用户名或者邮箱" data-content="输入用户名或者邮箱"
data-trigger="hover" data-toggle="popover" data-placement="top" />我这里使用的是top位置，触发器使用的是hover
最后加入下面的js代码:
<script>
$(function () {
$("[data-toggle='popover']").popover();
});
</script>详细可以参考：https://www.runoob.com/bootstrap/bootstrap-popover-plugin.html
Comments