Using bootstrap to realize the effect of suspension window _javascript tips

It is common for such a scenario to play a community site often, as shown in the figure:

The mouse pauses over a hyperlink, and a floating box appears, with some information about the account.

Just recently doing some front-end stuff that involves similar needs. --mouse hover, there is a floating box, the suspension box describes some specific information. Before actually refer to an article on the net, but feel a bit too complex. And found that: the magic of the bootstrap on its own with this function. So use the bootstrap PopOver plug-in to do, the effect is not bad. Although it is very simple, but it is a souvenir ...

Define a hyperlink, and note that the necessary CSS and JS for the corresponding page must be introduced:

HTML code

<link href= "Css/bootstrap.css" rel= "stylesheet"/> <script type= "Text/javascript" src= "js/" 
Jquery-1.8.3.min.js "></script> 
<script type=" Text/javascript "src=" Js/bootstrap.min.js "></" script> 
<a href= "#" class= "Bind_hover_card" data-toggle= "PopOver" data-placement= "Bottom" data-trigger= " Hover "></a>  

data-toggle="popover"property is the hyperlink binding window effect, data-placement="bottom" Specify the window relative to the location of the hyperlink display, is the data-trigger="hover" key to specify the suspension trigger window display.

Some common properties about the PopOver plug-in for Bootstrap are as follows:

Option name Type/default Value Data property name Description

Animation	Boolean Default value: True	Data-animation	Apply a CSS fade transition effect to the pop-up box.
Html	Boolean Default value: False	Data-html	Inserts HTML into the pop-up box. If the False,jquery text method is used to insert content into the DOM. If you are concerned about XSS attacks, use text.
Placement	String|function Default value: Top	Data-placement	Specify how to Position the pop-up box (that is, Top|bottom|left|right|auto). When specified as auto , the pop-up box is dynamically adjusted. For example, if placement is "auto left," The pop-up box will appear on the left-hand side as much as possible, and it will appear on the right if it is not allowed.
Selector	String Default value: False	Data-selector	If a selector is provided, the pop-up object is delegated to the specified target.
Title	string | function default value: '	Data-title	If the title property is not specified, the title option is the default title value.
Trigger	String default value: ' Hover Focus '	Data-trigger	Define how to trigger a pop-up box: click| hover | focus | manual. You can pass multiple triggers, separated by a space between each trigger.
Delay	number | Object default value: 0	Data-delay	Delay display and hide the number of milliseconds for the pop-up-the manual manual trigger type does not apply. If a number is provided, then the delay will be applied to display and hide. If you provide an object, the structure looks like this: Delay : { show :, hide:}
Container	string | False Default value: False	Data-container	Appends a pop-up box to the specified element. Example: container: ' Body '

Common methods:

Method describes an instance that Options: .popover(options) attaches a pop-up handle to an element collection.

$ (). PopOver (Options)
Toggle:. PopOver (' Toggle ') toggles the display/Hide element pop-up box.
$ (' #element '). PopOver (' toggle ')
Shows:. PopOver (' show ') displays the element's pop-up box.
$ (' #element '). PopOver (' show ')
Hide:. PopOver (' hide ') hides the pop-up box for the element.
$ (' #element '). PopOver (' hide ')
Destroy:. PopOver (' Destroy ') hides and destroys the element's pop-up box.
$ (' #element '). PopOver (' Destroy ')

OK, the next point is the JS section.

$ (function () { 
  $ ("[data-toggle= ' PopOver ']"). PopOver ({ 
    html:true,  
    title:title (),  
    delay:{show : hide:1000}, 
    content:function () {return 
     content ();  
    }  
  }); 

And we're going to simulate the dynamic loading of the title and contents of the suspension box:

Simulate dynamic load headers (the real situation may interact with Ajax in the background) 
function title () {return 
  ' Tim Shibi Hebe (Life in moderation) '; 
} 
 
Simulate dynamic load content (the real situation may be Ajax interaction with the background) 
function content () { 
  var data = $ ("<form><ul><li><span Aria-hidden= ' true ' class= ' icon_globe ' ></span> <font> number of Fans:</font>7389223</li> "+ 
       " <li><span aria-hidden= ' true ' class= ' Icon_piechart ' ></span> <font> concern: </font>265</ Li> "+ 
       " <li><span aria-hidden= ' true ' class= ' Icon_search_alt ' ></span> <font> Weibo: </ Font>645</li> "+ 
       " <li><span aria-hidden= ' true ' class= ' Icon_pens_alt ' ></span> < font> location:</font> Taiwan </li> "+ 
       " <input id= ' btn ' type= ' button ' value= ' concern ' onclick= ' test () '/> </form> "); 
   
  return data; 
} 
The button in the Simulated suspension box click Operation 
Function Test () { 
  alert (' Focus on success '); 

View Effects:

The above is a small set to introduce the use of bootstrap to achieve the effect of suspension window, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!