Tooltip is the second complex component of Bootstrap, with nearly three hundred rows. There are many configuration items. Manual Initialization is required. Another feature is that there is no custom event.
| Name | Type | Default | Description |
|---|---|---|---|
| Animation | Boolean Value | True | Add a light transition for the tooltip. |
| Placement | String or function | 'Top' | Position of the tooltip: Top | bottom | left | right. |
| Selector | String | False | If selector is provided, a tooltip is enabled for one or more elements that meet the conditions. |
| Title | String or function | '' | If the 'title' attribute does not exist, use this value as the default title. |
| Trigger | String | 'Hover' | Trigger method of tooltip: hover | focus | Manual) |
| Delay | Number or object | 0 | Latency (in milliseconds) for display and hide) If a number is provided, the latency will be applied to both display and hide. If it is an object, its structure is: |
In general, it is used for inline elements, links, or images. By extracting its title to form a floating prompt layer. For example, the following HTML structure:
<P class = "muted" style = "margin-bottom: 0;"> "this is my first English access. Sorry, It is not rigorous, but I have to do this, not only is it because of the limited interview time, but also because I am facing Cameron. This person loves challenges and never fears. He also hopes that others will do so. He can forgive him for being imperfect, however, he cannot accept that a person does not try to reach his limits." -- <A href = "#" rel = "tooltip" data-original-Title = "chai Jing is always closest to news, with her sharpness, sharpness, firmness, and persistence, she eventually became an excellent journalist. "> Chai Jing </a> interview with saw <a href =" # "rel =" tooltip "data-original-Title =" a famous film director born in Canada in August 16, 1954, he is good at shooting action movies and sci-fi movies. "> Cameron </a> </P>
Use:
$ ('. Muted A'). tooltip ({placement: "bottom "})
</P> <p> <! Doctype HTML> <br/> <pead> <br/> <title> Bootstrap learning by situ zhengmei </title> <br/> <meta HTTP -equiv = "Content-Type" content = "text/html; charset = UTF-8 "> </P> <p> <LINK rel =" stylesheet "href =" http://files.cnblogs.com/rubylouvre/bootstrap.css "/> <br/> <SCRIPT src =" http://files.cnblogs.com/rubylouvre/jquery1.83.js "> </ SCRIPT> <br/> <SCRIPT src = "http://files.cnblogs.com/rubylouvre/bootstrap-transition. JS "> </SCRIPT> <br/> <SCRIPT src =" http://files.cnblogs.com/rubylouvre/bootstrap-tooltip.js "> </SCRIPT> </P> <p> <SCRIPT> <br/> $ (Function () {<br/> var log = function (s) {<br/> window. console & console. log (s) <br/>}< br/> $ ('. muted '). tooltip ({<br/> placement: "bottom" <br/>}) <br/> }) <br/> </SCRIPT> <br/> <SCRIPT> </P> <p> </SCRIPT> <br/> </pead> <br/> <body> </P> <p> <P class = "muted" style = "margi N-bottom: 0; "> <br/>" this is my first English access. I am sorry it is not rigorous, but I have to do so, not just because of the interview time limit, even more, I am facing Cameron, who loves challenges and never fears. He also hopes that others will do so. He can forgive him for being imperfect, however, he cannot accept that a person does not try to reach his limits." <Br/> -- <a href = "#" rel = "tooltip" data-original-Title = "chai Jing is always closest to news, with her sharpness, sharpness, firmness, and persistence, she eventually became an excellent journalist. "> Chai Jing </a> interview with saw <a href =" # "rel =" tooltip "data-original-Title =" a famous film director born in Canada in August 16, 1954, he is good at shooting action movies and sci-fi movies. "> Cameron </a> <br/> </P> <p> </body> <br/> </ptml> <br/>
RunCode
It corresponds to the less tooltip. Less.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
