jquery Hint plugin qtip2 use (full)

Detailed reference:http://qtip2.com
I downloaded the library file as well as my own summary of the information:Link: http://pan.baidu.com/s/1pJI43Cv Password: 751y
Basic usage: (1) Only simple hints$ (' #username '). Qtip ({//Grab some elements to apply the Tooltipto   content: {      text: ' User name can only be entered in English letters or numbers '   }});
(2) with the title
$ (' #password '). Qtip ({//Grabsome elements to apply the ToolTip to  content: {      text: ' Password is 6-12 digits ',Title: "Demo",  }



(3) Set Location
$ (' #password '). Qtip ({//Grab some elements to apply the Tooltipto   content: {      text: ' Password is 6-12 digits ',Title: "Demo",   },position:{    my: ' Top left ', At: ' bottom center ', },style:{      classes: ' Qtip-purple ',      Tip: {                    Border:1,          width:50,          height:20       }}});
my: Refers to the location of the triangleAt : is a hint at the relative position of the component(top upper bottom ) ( left and right center)two groups of mates use
(4) Setting style
$ (' #password '). Qtip ({//Grab someelements to apply the ToolTip to   content: {      text: ' Password is 6-12 digits ',Title: "Demo",   },position:{      my: ' Top left ',      at: ' Bottom center ',},style:{    classes: ' Qtip-purple ',       Tip: {                    Border:1,          width:50,          height:20       }}});classes can have a variety of options
Qtip-light Lightqtip-dark Dark
Qtip-cream
qtip-red
Qtip-blue
Qtip-shadow
qtip-rounded Rounded Corners
Qtip-youtube
Qtip-jtools
Qtip-cluetip
Qtip-tipsy
Qtip-tip
Qtip-titlebar
Qtip-default
classes: ' Qtip-purple ',


classes: ' qtip-purpleqtip-rounded ',

You can customize the qtip-purple above is my own definition.

. Qtip-purple{background-color: #9FF0E1; border-color: #EEC933; color: #42B453}.qtip-purple.qtip-titlebar{ Background-color: #9465E1}
Background-color is the background color of the contentBorder-color: The entire bordercolor: The colors of the text. Qtip-purple.qtip-titlebar{background-color: #9465E1} set the background color of the caption

title can also set the caption text color
. Qtip-purple. Qtip-titlebar{background-color: #9465E1;color:red} 

(6 ) Show hidden resets, etc.

Display: $ (' #username '). Qtip (' show ' );

Hidden: $ (' #username '). Qtip (' Hide ' );

$ ('. Selector '). Qtip (' reposition '); //Reposition all ToolTips belonging to the selected elements reset The selector selects the element's prompt component

$ ('. Selector '). Qtip (' disable '); //Disable all ToolTips belonging to the Selectedelements

The selector selection element's prompt component is set to unavailable state

$ ('. Selector '). Qtip (' toggle ',true); Displays the prompt component of the selector selected element $ ('. Selector '). Qtip (' destroy '), true ); //Directly destroys the prompt component belonging to the selected element of the selector

(7) Modifying Values

$ ("#username"). Qtip (' API '). Set (' Content.text ', ' Here's content ');

$ ("#username"). Qtip (' API '). Set (' Content.text ', ' Here is the modified content '). Set (' Content.title ', ' Here is the modified title ');

jquery Hint plugin qtip2 use (full)