Application and instance code of PopOver in bootstrap

Source: Internet
Author: User
Tags java web

Recently on Self-Study Java Web Foundation, builds own page time to use the boostrap JS Library . Since no prior contact with jquery, so used to stumble, so here to simply remember the boostrap I used in some of the JS plug-in usage.

The first one to use is the popover plug-in in Boostrap . The reason is that a simple registration interface needs to verify that the user name is legitimate, whether it has been registered, the password is legitimate, re-enter the password and before the password matching, etc., need to use PopOver to carry out information warning.

First, a simple example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<divclass= "container" style= "padding:100px 50px 10px;" >
 <buttontype= "button" id= "Button1" class= "btn btn-default"
 &nbs P; data-container= "Body" data-toggle= "popover" >
   left PopOver
& Nbsp;</button>
</div>
 
<script> /div>
$ (function () {
 $ (' #button1 '). PopOver ({
  trigg ER: ' Click ',
  title: ' test1 ',
  placement: ' Right ',
  content: ' Hello '
 };
});
</script>

You can see that when using APIs for PopOver programming, be sure to reference $ (' #element '). PopOver () PopOver Activate a control that id= "element". Before the direct copy of the official online code, found that after the click can not trigger, has been very confused. Then using name= "element" is not able to activate the popover.
If you need to add a popover effect to the input box, you need only trigger= ' Focus ' . However, it does not seem to support blur, and it is not possible to determine whether the contents of the input box are legitimate and trigger popover after blur. This will need to be followed by further study.

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.