Home > Article > Web Front-end > Detailed explanation of the information prompt box in Bootstrap
This article will give you a detailed introduction to the information prompt box in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
The prompt box is a relatively common function. Generally speaking, when the mouse moves over a specific element, relevant prompts are displayed. [Related recommendations: "bootstrap Tutorial"]
The prompt box in the Bootstrap framework has a very simple structure and is often used. Create a button
1. Define the prompt information through the value of the title attribute (you can also use the custom attribute src-title to set the prompt information) , the title attribute has a high priority
2. Use the data-placement custom attribute to control the position of the prompt information box. According to four different positions, data-placement has four values: top, right, bottom and left, respectively indicating that the prompt box appears at the top, right, bottom and left
3. There is also the most important parameter that is indispensable, data-toggle="tooltip"
[Triggering method]
The triggering method of the prompt box in the Bootstrap framework is slightly different from the plug-in introduced earlier. It cannot be triggered directly through the custom attribute data-. Must rely on JavaScript code triggering
The simplest triggering method is as follows:
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<script>
$(function(){
$(&#39;[data-toggle="tooltip"]&#39;).tooltip();
});
</script>
<script>
$(function(){
$(&#39;[data-toggle="tooltip"]&#39;).tooltip();
});
</script>
$(element).tooltip(options);
<button type="button" class="btn btn-default" data-toggle="tooltip" >按钮</button>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip({
title:"我是提示语",
placement:'right'
});
});
</script>
[Keywords]
In addition to using the options object, you can also use keywords, '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>
【Event】
This plug-in supports 5 types of event subscriptionsshow.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>
##More programming related knowledge , please visit:
The above is the detailed content of Detailed explanation of the information prompt box in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!