bootstrap tips 插件学习笔记

文章参考

http://v3.bootcss.com/javascript/#tooltips

 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on left">Tooltip on left</button>
<br>
<span   data-toggle="tooltip" data-placement="right" title="黄彪测试内容">Tooltip on left</span>
<br>
<br>
<span id="huangbiao">Tooltip on left</span>
<script>
$(function () {
	//初始化tooltips
	$('[data-toggle="tooltip"]').tooltip();
	$('#huangbiao').tooltip({
		//自定义弹出控件显示的内容
		template : '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
		//提示标签在控件显示的位置 —— top | bottom | left | right | auto
		placement : "bottom",
		//在template模板<div class="tooltip-inner"></div>控件内展示的内容
		title:"<span style='background: blue'>tooltips_title</span>",
		//触发事件click | hover | focus | manual.
		trigger:"hover",
		//是否将html代码做转换，false是不转换，true表示转换
		html:false
	});
})
</script>