jquery hint effect code sharing _jquery

Code One:

Copy Code code as follows:

<p><a href= "#" class= "tooltip" title= "This is my hyperlink tip 1." > Tips 1.</a></p>
<p><a href= "#" class= "tooltip" title= "This is my hyperlink tip 2." > Tips 2.</a></p>
<p><a href= "#" title= "This is a tip 1." > With tips 1.</a></p>
<p><a href= "#" title= "This is a tip 2." > With tips 2.</a></p>

Copy Code code as follows:

$ (function () {
$ (". ToolTip"). MouseEnter (function (e) {
This.mytitle=this.title
This.title= ""
var a= "<div>" +this.mytitle+ "</div>"
$ ("Body"). Append (a);
$ ("div"). css ({
"Top": (E.pagey + y) + "px",
"Left": (E.pagex + x) + "px"
}). Show ("Fast")
}). mouseout (function () {
This.title= This.mytitle;
$ ("div"). Remove ();
});
})

Learning experience:

Do not append the div element under the P tag, there will be a large deviation value!

Originally! This and $ ("this") are different if the above
This.title Rewrite to $ ("this"). attr ("title") can cause the following Mouseout events to not access the saved title

Code two:

Referencing Css:jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css
Referencing Js:jqueryui/js/jquery-ui-1.8.18.custom.min.js

Copy Code code as follows:

<script>
$ ("#dialog: Ui-dialog"). Dialog ("Destroy");

$ ("#dialog-message"). Dialog ({

HEIGHT:120,
width:220,
Modal:true,
Buttons: {
' No ': function () {
DoSomething
$ (This). dialog ("Close");
},
"Yes": function () {
DoSomething
$ (This). dialog ("Close");
}
}
});
</script>
<div id= "dialog-message" title= message box "style=" display:none;height:120px; width:220px; " > I am a pop-up message box </div>

Code Three:

Using the JavaScript pop-up layer component Easydialog

Easydialog after a period of use, the use of some of the problems encountered in the summary, recently spent a little time on the original code has been refactored and optimized, and added a number of new features. The original version is just to achieve the basic functionality of a simple pop-up layer, from the perspective of the project is how to quickly complete the project, and this version is not only to achieve basic functionality, more consideration of how the pop-up layer better and easier to apply to the project.
Easydialog v2.0 new features:

1. Added the default pop-up content template, if just a few simple applications, they can not write the structure of the pop-up content, but simply pass a few simple parameters, the original use of:

Copy Code code as follows:

Easydialog.open ({
Container: ' Demobox '
});

Using the default content template, the container parameter can be used in this way:

Copy Code code as follows:

Easydialog.open ({
Container: {
Header: ' Pop-up-level header ',
Content: ' Welcome to use Easydialog: ',
YESFN:BTNFN,
Nofn:true
}
});

The effects shown are shown in the following illustration:

If you want to modify the style of the default content template, you can modify the Easydialog.css file in the download document to achieve the style you want.
2. Increased drag-and-drop effect, so that the pop-up layer has a better user experience, and custom pop-up content can easily achieve drag-and-drop effect.
3. The internal cache system, micro-event processing system, the content of the pop-up layer has also been cached to make the pop-up layer performance better.
Another modification of the name of a parameter, the original Isoverlay changed to overlay, the original pop-up layer of the elements of the ID also renamed, as far as possible to avoid conflicts.

Above 3 kinds are I commonly used the hint effect, everybody according to own project demand, free use