工学1号馆

今天在项目中使用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