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"]

Basic usage

The prompt box in the Bootstrap framework has a very simple structure and is often used. Create a button tag or a link tag. Whether you use buttons or links to make prompt boxes, they all need to meet the following conditions:

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();
});

提示框居左
提示框在顶部
提示框在底部
提示框居右

##Attribute parameters

无动画
有动画
hover触发
click触发
不延迟
延迟500ms

JS trigger

$(element).tooltip(options);

按钮

[Keywords]

按钮1
按钮2
按钮3
按钮4

【Event】

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触发后，触发该事件

按钮

##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!