|
quot;500">延迟500ms</button>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<iframe style="width: 100%; height: 120px;" src="http://owbhsauev.bkt.clouddn.com/bootstrap/tooltip/t2.html" frameborder="0" width="320" height="240">
JS触发
除了上面所说的最简单的一种触发方法，也可以单独指定一个元素，在该元素上调用Tooltip组件，并且还可以提供各种java script形式的自定义参数，而无需使用以data-开头的元素自定义属性
$(element).tooltip(options);
<button type="button" class="btn btn-default" data-toggle="tooltip" >按钮</button>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip({
title:"我是提示语",
placement:'right'
});
});
</script>
<iframe style="width: 100%; height: 50px;" src="http://owbhsauev.bkt.clouddn.com/bootstrap/tooltip/t3.html" frameborder="0" width="320" height="240">
【关键字】
除了使用options对象，还可以使用关键字，'show'、'hide'、'toggle'、'destroy'
<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn4">按钮4</button>
<script>
$(function(){
$('#btn1').tooltip('show');//显示提示语
$('#btn2').tooltip('hide');//关闭提示语
$('#btn3').tooltip('toggle');//反转提示语
$('#btn4').tooltip('destroy');//隐藏并销毁提示语
});
</script>
</body>
<iframe style="width: 100%; height: 100px;" src="http://owbhsauev.bkt.clouddn.com/bootstrap/tooltip/t4.html" frameborder="0" width="320" height="240">
【事件】
该插件支持5种类型的事件订阅
show.bs.tooltip show方法调用之后立即触发该事件
shown.bs.tooltip 此事件在tooltip已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.tooltip hide方法调用之后立即触发该事件。
hidden.bs.tooltip 此事件在tooltip被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
inserted.bs.tooltip 当tooltip模板加载到DOM中上时，在show.bs.tooltip触发后，触发该事件
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="提示信息" id="btn">按钮</button>
<script>
$(function(){
$('#btn').tooltip();
$("#btn").on("show.bs.tooltip",function(e){
$(this).html('关闭提示');
}).on("hide.bs.tooltip",function(e){
$(this).html('打开提示');
})
});
</script>
<iframe style="width: 100%; height: 50px;" src="http://owbhsauev.bkt.clouddn.com/bootstrap/tooltip/t5.html" frameborder="0" width="320" height="240">
<script type="text/java script" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js">
<script type="text/java script" src="http://files.cnblogs.com/files/xiaohuochai/c |