Code for creating the prompt box plug-in using jquery plug-in

Source: Internet
Author: User

First, we will introduce the development of a custom selector. Its code structure is as follows:
Copy codeThe Code is as follows:
(Function ($ ){
$. Expr [':']. customselector = function (object, index, properties, list ){
// Code
}) (JQuery );

Method of calling:
$ (A: customselector) Now let's explain the parameters used in the function.
Object: reference of the current dom element, rather than the jquery object. One thing to emphasize is that dom elements and jquery objects are completely different. Tag a represents dom elements, and $ ('A') represents jquery objects, it is a js object. I am not clear about google.
Index: An array index with a subscript of 0.
Properties: an array of selector metadata.
List: dom element array.
Among these parameters, the first parameter is required, and the other parameters are optional.
The selector function determines whether to include the current element through the bool value. true contains, and false does not.
Here we implement a selector for the tag and select only the tag pointing to the external link. The Code is as follows:
Copy codeThe Code is as follows:
(Function ($ ){
$. Expr [':']. external = function (object ){
If ($ (object). is ('A ')){
Return object. hostname! = Location. hostname;
}) (JQuery );

Now we start to develop the prompt box plug-in. We will not talk about it much in the development process, mainly in code implementation, which contains remarks.
Copy codeThe Code is as follows:
(Function ($) {// update coordinates
$. Fn. updatePosition = function (event ){
Return this. each (function (){
Certificate (this).css ({
Left: event. pageX + 20,
Top: event. pageY + 5
// The prompt box plug-in will display the content of the tag title attribute
$. Fn. tooltip = function (){
Return this. each (function (){
// Obtain the current object
Var self = $ (this );
// Obtain the title Attribute Value
Var title = self. attr ('title ');
// Determine whether the current object is a tag and whether the title attribute contains content
If (self. is ('A') & title! = ''){
Self. removeAttr ('title ')
. Hover (function (event ){
// Move the cursor over the target object
$ ('<Div id = "tooltip"> </div>'). appendTo ('body ')
. Text (title)
. Hide ()
. UpdatePosition (event)
. FadeIn (400 );
}, Function (){
// Move the mouse out
$ ('# Tooltip'). remove ();
}). Mousemove (function (event ){
// Move the mouse
$ ('# Tooltip'). updatePosition (event );
}) (JQuery );

Hope this article will be useful to you. If you want to see the complete effect, you can go to the demo: jQuery. plugin. tooltip

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.