qTip2 Exquisite prompt information plug-in based on jQuery_jquery

qTip2 adopts the MIT/GPLv2 license. The official website is: http://craigsworks.com/projects/qtip2/. It has not released a stable version yet. The Nightly version will be updated frequently. Of course, this It does not affect normal use.
Introduction
If you are worried, you can try the old version of qTip, but some parameters will be different; 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 there are problems when using it, then download the following 3 files directly. At least the official demo is normal:

Copy code The code is as follows:

When downloading the latest version from the official website, You can choose the corresponding styles and plug-ins; the optional styles include several color styles (Colour Styles), CSS3 related styles such as rounded corners; and the following various plug-ins, you can choose according to your own needs:

1. Ajax, needless to say, requests remote content
2. Tips, bubble dialogue effects, such as arrows
3. Modal, modal dialog effect, such as the effect of jQuery UI Dialog / ThickBox
4. Image map, providing prompt support for area tags in the map
5. SVG, support for hints on SVG elements
6. BGIFrame, used for antiques like IE6, such as covering select controls, etc.

In addition to the functions of the above plug-in, its main functions are (only the more commonly used ones are listed):

1. Set the prompt content, title, close button, etc.
2. Use the attributes of the element as the content of the prompt information, such as the title of the link (The location where the prompt information is displayed
3. The target of the prompt information, that is, what element is displayed on it
4. Events triggered by displaying/hiding the prompt information, such as moving the mouse to the element and clicking (mouseenter, click)
5. The effect of displaying/hiding prompt information
6. Definition of appearance, through corresponding style settings
7. Follow draggable targets, mouse pointers, etc.

How to use
The following is a simple demonstration of some usage methods

Create the simplest prompt:

Copy code The code is as follows:

$("#demo2").qtip({
content: "This is the tip content (by囧月)"
} ;

$("#demo3").qtip({
content: {
text: "This is the tip content (by囧月lwme.cnblogs.com)"

, title: "Prompt title" } }); Prompt with close button:

Copy code


The code is as follows:

$("#demo3").qtip({
content: {
text: "This is the prompt content (by囧月lwme. cnblogs.com)"

, title: { text: "Prompt title" , button: "Close" } } });

Use the attribute of the element as the prompt message:




Copy the code


The code is as follows:

$ ("a[title]").qtip(); //From the link's title
$("img[alt]").qtip(); //From the img's alt
$("div[ title]").qtip(); // From the title of the div

you can also explicitly specify element attributes as prompt information:

Copy the code

The code is as follows:

$('img[alt]').qtip({
content: {
attr: 'alt'

} }); Use AJAX to request the remote:

Copy code


The code is as follows:

$("#demo4").qtip({
content: {
text: "Loading...",
ajax: {
url: "lwmeAtCnblogs. aspx?name=囧月"
}
}
});

Set position and style:

Copy the code The code is as follows:

$("#demo5").qtip({
position: {
my: 'bottom left',
at: 'top center'
},
style: {
classes: 'ui-tooltip-red'
}
});

A modal dialog box appears when clicked:

Copy code The code is as follows:

$(' button').qtip({
content: "This is the tip content (by囧月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
});

Displayed when the page is loaded and will not hide automatically:

Copy code The code is as follows:

$('button').qtip({
content: "This is the tip content (by囧月lwme.cnblogs.com)",
show : {
ready: true
},
hide: false
});

Parameter settings
First look at the default parameter settings of qTip2:

Copy code The code is as follows:

$.fn.qtip.defaults = {
// When the page is loaded, create an element of prompt information
prerender: false,
// Set the id for the prompt information, for example, set it to myTooltip
// You can access this prompt information through ui-tooltip-myTooltip
id: false,
// Each time a prompt is displayed, delete the previous prompt
overwrite: true,
// Create a prompt through element attributes
// For example, a[title], replace the original prompt Some titles are renamed to oldtitle
suppress: true,
// Content-related settings
content: {
// Content of the prompt message
// If you only set the content, you can directly content : "Prompt information"
// Without content: { text: { "Prompt information" } }
text: true,
// Element attributes used by prompt information
attr: 'title ',
// ajax plug-in
ajax: false,
title: {
// Title of the prompt message
// If you only set the title, you can directly title: "title"
text: false,
// Close button for prompt information
// For example, button: "x", button: "Close"
// You can enable the close button
button: false
}
},
// Position related settings
position: {
// Position of prompt information
// For example, the lower right corner of the target element of the prompt (at attribute)
// Corresponding to the upper left corner of the prompt information (my attribute)
my: 'top left',
at: 'bottom right',
// The target element of the prompt, the default is the selector
target : FALSE,
// The container to which the prompt information is added by default
container: FALSE,
// Make the prompt information visible within the specified target and will not exceed the boundary
viewport: FALSE,
adjust: {
// Prompt information position 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
});
}
},
//Related settings for display prompts
show: {
// Target element that triggers the event
// Default is selector
target: false,
// Event name, the default is when the mouse moves
// It can be changed to click
event: 'mouseenter',
// Special effect
effect: true ,
//Delay display time
delay: 90,
//Hide other prompts
solo: false,
//Display prompt after the page is loaded
ready: false,
modal: {
// Enable modal dialog effect
on: false,
// Special effect
effect: true,
blur: true,
escape: true
}
},
// Related settings for hiding prompts
// Refer to show
hide: {
target: false,
event: 'mouseleave',
effect: true,
delay: 0,
// When 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
}
},
// Related event binding
events: {
render: null,
move: null,
show: null,
hide: null,
toggle: null,
visible: null,
focus: null,
blur: null
}
};

It seems like a lot, but the most frequently used parameters are estimated to be the following:

Copy code Code As follows:

$.fn.qtip.defaults = {
content: {
text: true,
attr: 'title',
ajax: false,
title: {
text: false,
button: false
}
},
position: {
my: 'top left',
at: 'bottom right',
},
show: {
event: 'mouseenter',
solo: false,
ready: false,
modal: false
},
hide: {
event: 'mouseleave'
},
style: 'ui-tooltip-default'
};

For the displayed position, there are the following Parameters can be set:

Copy code The 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'
]

The displayed color style has the following colors:

Copy Code The code is as follows:

['red', 'blue', 'dark', 'light', 'green','jtools', 'plain' , 'youtube', 'cluetip', 'tipsy', 'tipped']

For example, red is ui-tooltip-red, which defaults to default. In addition, there are ui-tooltip-shadow and ui-tooltip-rounded respectively representing shadow and rounded corner effects, which can be superimposed, as follows:

Copy code The code is as follows:

$("#demo2").qtip({
content: "This is the tip content (by囧月)"
, style: {
classes: 'ui-tooltip-red ui-tooltip-shadow ui-tooltip-rounded'
}
});

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

Copy code The 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 retrieving JSON
success: function(data, status) {
//...
}
}
}
} );

It should be noted that AJAX uses GET requests by default and cache is enabled.
End
This is the introduction about qTip2. For more information, please refer to the following link:
Official website: http://craigsworks.com/projects/qtip2/
Online demo: http://craigsworks.com/projects/qtip2/demos/
Official documentation: http://craigsworks.com/projects/qtip2/docs /
Finally, put a simple DEMO.
Author:囧月