Bootstrap_javascript_ Prompt Box

I. Structural ANALYSIS

In the bootstrap frame, the structure is very simple, often using buttons <button> tags or links <a> tags to make. Whether you use a button or a link to make a cue box, they all have a common denominator:

1. The cue information is defined by the value of the Title property (you can also use the custom attribute data-original-title to set the hint).
2. By Data-placement custom properties to control the location of the cue box, the data-placement has four values based on four different positions: top, right, bottom, and left, respectively, indicating that the cue box appears at the top, the bottom, the lower, and the other.
3. There is also one of the most important parameters indispensable, data-toggle= "tooltip".

　The cue box must be triggered by JS

Two. JS Trigger Prompt Box method (i)

Html:

<type= "button"        class= "btn btn-default"         Data-toggle= "tooltip"        data-placement= "Right"         Data-original-title= "Cue box left"        title= "">   Cue box right </button>

Js:

<script>  $ (function() {    $ (' [data-toggle= ' tooltip '] '). tooltip ();  }); </script>

Three. JS Trigger Prompt Box Method (ii)

Html:

<href= "# #"   class= "btn btn-primary"    ID= "Mytooltip"> I am the   cue box </a> 

Js:

  $ (function() {    $ (' [data-toggle= ' tooltip '] '). tooltip ();    $ (' #myTooltip '). ToolTip ({      title:"I am a prompt box, I appear at the top",      placement:' bottom '     });  });

Four. Prompt Box Custom properties

Bootstrap_javascript_ Prompt Box