Bootstarp4 prompt box

1: Create a prompt box

Tip box is a little pop to the elements shown in the mouse movement, mouse over the elements outside disappears.

By adding elements  to create prompt box data-toggle = "tooltip".

Content of the title attribute for the content of the message box is displayed:

< A href = "#" the Data-Toggle = "ToolTip" title = "I am prompt content!" > Mouse moves me </ A >

Note: The  prompt box to write initialization code in jQuery's: then call on the specified element  tooltip () method.

The following examples prompt box can be used anywhere in the document:

< Div class = "Container" > 
  < h3 > prompt box instance </ h3 > < br > 
  < A href = "#" the Data-Toggle = "ToolTip" title = "I am prompt content!" > Mouse moves me </ A > 
</ div > 

< Script > 
$ (Document) .ready ( function () { 
    $ ( ' [Data-Toggle = "ToolTip"] ' ) .tooltip ();    
}); 
</ Script >

2: Specify the prompt box location

< Div class = "Container" > 
  < h3 > prompt box instance </ h3 > < br > 
  < A href = "#" the Data-Toggle = "ToolTip" the Data-Placement = "Top" title = "I am prompt content! " > mouse movement to me </ A > 
  < A href =" # " the Data-Toggle =" ToolTip " the Data-Placement =" bottom " title =" I am prompt content! " > mouse moves me </ A >
  <a href="#"the Data-Toggle = "ToolTip" the Data-Placement = "left" title = "I am prompt content!" > mouse moves me </ A > 
  < A href = "#" the Data-Toggle = "ToolTip" the Data-Placement = "right" title = "prompt content I!" > mouse to move to me </ A > 
</ div > 

< Script > 
$ (Document) .ready ( function () { 
    $ ( ' [= Data-Toggle " ToolTip "] ' ) .tooltip ();    
});
</script>

 

Guess you like

Origin www.cnblogs.com/gjh99/p/11274427.html