QTip2 exquisite jQuery-based prompt information plug-in

QTip2 adopts the MIT/GPLv2 license. The official website is: Quota.
Introduction
If you are not at ease, you can try the old version of qTip, but it may vary with some parameters. If you upgrade from qTip to qTip2, you can use the official conversion tool to upgrade your code: http://craigsworks.com/projects/qtip2/converter /.

If a problem occurs during use, download the following three files. At least the official demo is normal:
Copy codeThe Code is as follows:
<Link href = "http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" rel = "stylesheet"/>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<Script src = "http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"> </script>

When downloading the latest version from the official website, you can select the appropriate style and plug-in. The optional style includes several color Styles, CSS 3 related Styles, such as rounded corners, and the following plug-ins, you can select as needed:

1. Ajax, needless to say, requests remote content
2. Tips, bubble dialog effect, such as Arrow
3. Modal, Modal Dialog box effect, such as jQuery UI Dialog/ThickBox Effect
4. Image map, which provides support for area marking in map
5. SVG, which provides prompt support for SVG elements
6. BGIFrame, used for IE6 antiques, such as hiding select controls

In addition to the functions of the preceding plug-ins, the main functions of the plug-in are ):

1. Set the content, title, and button of the prompt.
2. Use the attributes of the element as the content of the prompt information, such as the title of the Link (<a title = "prompt information"), the image prompt (
3. Location where the prompt information is displayed
4. The target of the prompt information, that is, the element to be displayed.
5. Displays or hides the trigger events, such as moving the mouse over an element and clicking (mouseenter, click)
6. Display/hide information
7. The definition of the appearance, through the corresponding style settings
8. Follow the drag target, mouse pointer, and so on

Usage
The following is a simple example of how to use

Create a simple prompt:

Copy codeThe Code is as follows:
$ ("# Demo2"). qtip ({
Content: "This is the prompt content (by month )"
});

Create a title prompt:
Copy codeThe Code is as follows:
$ ("# Demo3"). qtip ({
Content :{
Text: "This is the prompt content (by month lwme.cnblogs.com )"
, Title: "title"
}
});

Note:
Copy codeThe Code is as follows:
$ ("# Demo3"). qtip ({
Content :{
Text: "This is the prompt content (by month lwme.cnblogs.com )"
, Title :{
Text: "title"
, Button: "close"
}
}
});

Use the attributes of the element as the prompt information:
Copy codeThe Code is as follows:
$ ("A [title]"). qtip (); // the title of the slave Link
$ ("Img [alt]"). qtip (); // alt from img
$ ("Div [title]"). qtip (); // from the title of the div

You can also explicitly specify the element attribute as the prompt information:
Copy codeThe Code is as follows:
$ ('Img [alt] '). qtip ({
Content :{
Attr: 'alt'
}
});

Remote request using AJAX:

Copy codeThe Code is as follows:
$ ("# Demo4"). qtip ({
Content :{
Text: "loading ...",
Ajax :{
Url: "lwmeAtCnblogs. aspx? Name = monthly"
}
}
});

Set the position and style:
Copy codeThe Code is as follows:
$ ("# Demo5"). qtip ({
Position :{
My: 'bottomleft ',
At: 'top Center'
},
Style :{
Classes: 'ui-tooltip-red'
}
});

The modal dialog box appears when you click:
Copy codeThe Code is as follows:
$ ('Button '). qtip ({
Content: "This is the prompt content (by month lwme.cnblogs.com )",
Show :{
Event: 'click', // Show it on click...
Solo: true, //... and hide all other tooltips...
Modal: true //... and make it modal
},
Hide: false
});

The page is displayed when the page is loaded and is not automatically hidden:
Copy codeThe Code is as follows:
$ ('Button '). qtip ({
Content: "This is the prompt content (by month lwme.cnblogs.com )",
Show :{
Ready: true
},
Hide: false
});

Parameter settings
Let's take a look at the default qTip2 parameter settings:
Copy codeThe Code is as follows:
$. Fn. qtip. defaults = {
// After the page is loaded, the elements of the prompt information will be created.
Prerender: false,
// Set the id for the prompt information, such as myTooltip.
// You can access the prompt information through ui-tooltip-myTooltip.
Id: false,
// Delete the last prompt for each display.
Overwrite: true,
// Prompt for creating element attributes
// For example, a [title], rename the original title as oldtitle
Suppress: true,
// Content-related settings
Content :{
// Content of the prompt message
// If you only set the content, you can directly content: "prompt message"
// Content: {text: {"prompt message"} is not required "}}
Text: true,
// Element attributes used for the prompt information
Attr: 'title ',
// Ajax plugin
Ajax: false,
Title :{
// The title of the prompt message
// If you only set the title, you can directly title: "title"
Text: false,
// Close the prompt
// For example, button: "x", button: "close"
// You can enable the close button.
Button: false
}
},
// Location-related settings
Position :{
// Location of the prompt information
// As shown in the following figure, the bottom right corner of the target element (at attribute)
// The upper left corner of the corresponding prompt information (my attribute)
My: 'top left ',
At: 'bottomright ',
// The target element of the prompt. The default value is the selector.
Target: FALSE,
// The prompt information is added to the container by default.
Container: FALSE,
// Make the prompt information visible within the specified target, without exceeding the Boundary
Viewport: FALSE,
Adjust :{
// The location of the prompt message is offset.
X: 0, y: 0,
Mouse: TRUE,
Resize: TRUE,
Method: 'flip flip'
},
// Special Effects
Effect: function (api, pos, viewport ){
$ (This). animate (pos ,{
Duration: 200,
Queue: FALSE
});
}
},
// Display related settings
Show :{
// The target element that triggers the event
// The default value is selector.
Target: false,
// Event name. The default value is when the mouse is moved.
// You can click it again.
Event: 'mouseenter ',
// Special Effects
Effect: true,
// Delay display time
Delay: 90,
// Hide other prompts
Solo: false,
// A prompt is displayed after the page is loaded.
Ready: false,
Modal :{
// Enable the Modal Dialog Box
On: false,
// Special Effects
Effect: true,
Blur: true,
Escape: true
}
},
// Hide the settings of the prompt
// Refer to show
Hide :{
Target: false,
Event: 'mouseleave ',
Effect: true,
Delay: 0,
// If it is set to true, it will not be hidden
Fixed: false,
Inactive: false,
Leave: 'window ',
Distance: false
},
// Style related
Style :{
// Style name
Classes :'',
Widget: false,
Width: false,
Height: false,
// Tip plug-in, arrow related settings
Tip :{
Corner: true,
Mimic: false,
Width: 8,
Height: 8,
Border: true,
Offset: 0
}
},
// Bind related events
Events :{
Render: null,
Move: null,
Show: null,
Hide: null,
Toggle: null,
Visible: null,
Focus: null,
Blur: null
}
};

There seems to be many, but the most frequently used estimation is the following parameters:

Copy codeThe Code is as follows:
$. Fn. qtip. defaults = {
Content :{
Text: true,
Attr: 'title ',
Ajax: false,
Title :{
Text: false,
Button: false
}
},
Position :{
My: 'top left ',
At: 'bottomright ',
},
Show :{
Event: 'mouseenter ',
Solo: false,
Ready: false,
Modal: false
},
Hide :{
Event: 'mouseleave'
},
Style: 'ui-tooltip-default'
};

You can set the following parameters for the displayed position:
Copy codeThe Code is as follows:
My = [
'Top left', 'top right', 'top Center ',
'Bottom left', 'bottom right', 'bottom Center ',
'Right Center', 'right top', 'right bottom ',
'Left Center', 'left top', 'left bottom ', 'center'
]
At = [
'Bottom left', 'bottom right', 'bottom Center ',
'Top left', 'top right', 'top Center ',
'Left Center', 'left top', 'left bottom ',
'Right Center', 'right top', 'right bottom ', 'center'
]

For the color style displayed, the following colors are available:

Copy codeThe Code is as follows:
['Red', 'Blue ', 'dark', 'light', 'green', 'jtool', 'plain ', 'youtube', 'cluetip ', 'tipsy', 'tipped']

For example, red is ui-tooltip-red. The default value is default. In addition, ui-tooltip-shadow and ui-tooltip-rounded indicate shadow and rounded corner effects, which can be superimposed as follows:
Copy codeThe Code is as follows:
$ ("# Demo2"). qtip ({
Content: "This is the prompt content (by month )"
, Style :{
Classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});

In addition, the following parameters can be set for ajax (consistent with jQuery. ajax ):

Copy codeThe Code is as follows:
$ ('. Selector'). qtip ({
Content :{
Text: 'loading... ', // Loading text...
Ajax :{
Url: '/path/to/file', // URL to the JSON script
Type: 'get', // POST or GET
Data: {id: 3}, // Data to pass along with your request
DataType: 'json', // Tell it we're re retrieving json
Success: function (data, status ){
//...
}
}
}
});

By default, AJAX uses GET requests and enables cache.
End
For more information, see the following link:
Http://craigsworks.com/projects/qtip2/
Online Demo: http://craigsworks.com/projects/qtip2/demos/
Official documents: http://craigsworks.com/projects/qtip2/docs/
Finally, put a simple DEMO.
Author: jinyue