Bootstrap source code learning and example: Bootstrap-tooltip

Source: Internet
Author: User

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:Delay: {Show: 500, hide: 100}

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.