bootstrap自定义提示框

最新推荐文章于 2022-10-19 22:41:37 发布

清晨Feelter

最新推荐文章于 2022-10-19 22:41:37 发布

阅读量5k

点赞数 1

分类专栏：前端文章标签： bootstrap自定义提示框 tooltip

本文链接：https://blog.csdn.net/u010558660/article/details/51787487

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

bootstrap自定义提示框

http://www.runoob.com/bootstrap/bootstrap-tutorial.html bootstrap菜鸟教程

bootstrap Tooltip插件，显示自定义提示框不好用,.....

下面: 鼠标移入，显示自定义提示框

<!DOCTYPE html>
<html>
<head>
<title>custom tip</title>
<link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="bootstrap3/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="jquery.js"></script>
<script src="bootstrap3/js/bootstrap.min.js"></script>
<style type="text/css">
	.popover{
		max-width: 400px;
	}
</style>
<script type="text/javascript">
	$(function(){
		$("[rel=drevil]").popover({
			trigger:'manual',
			placement : 'right',
			title : '<div style="font-size:14px;">title</div>',
			html: 'true',
			content: function() {
				return $(this).attr('data-contentStr');
			},
			animation: false
		}).on("mouseenter", function () {
			var _this = this;
			$(this).popover("show");
			$(this).siblings(".popover").on("mouseleave", function () {
				$(_this).popover('hide');
			});
		}).on("mouseleave", function () {
			var _this = this;
			setTimeout(function () {
				if (!$(".popover:hover").length) {
					$(_this).popover("hide")
				}
			}, 100);
		});
	});
</script>
</head>
<body>
<div style="margin-top:120px;">
<a href="#" rel="drevil"
	data-contentStr="
		<table style='width:auto;height:auto;line-height:30px;text-line:1px;font-size:14px;'>
			<tr><td align='right'>language:</td><td>java aaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr>
			<tr><td align='right'>page:</td><td>html</td></tr>
			<tr><td align='right'>message:</td><td>kafka</td></tr>
			<tr><td align='right'>cache:</td><td>redis</td></tr>
		        <tr><td align='right'>db:</td><td>mysql</td></tr>
			<tr><td align='right'>frame:</td><td>spring</td></tr>
		</table>
	">show custom tip when mouse enter</a>
</div>			
</body>
</html>