JQuery Easyui tutorial-tooltip (hint box)

The previous article introduced the jquery Easyui Tutorial-progressbar (progress bar), the component front-end developers in the work of general use, and then to introduce the Jquery-tooltip (cue box) components, in the work process is also very useful.

This article gives you a detailed account of the use case of jquery-tooltip (cue box), and through the step-by-step code implementation process, not only let you master the implementation of the ToolTip, but also enhance your development work in the front-end programming interest and level.

Use $.fn.tooltip.defaults to override the default value object. (Translator Note: The new plugin in version 1.3.3)

When the user moves the mouse over the element, a message prompt appears. The contents of the prompt box can be any HTML element in the page or send a background request via AJAX to get the contents of the ToolTip.

Use case:

Create a prompt box

Create a prompt box with two ways to label and JavaScript.

1. Add a "Easyui-tooltip" class name to the element by creating a hint box with the tag, without any JavaScript code.

<a href= "#" title= "This is the ToolTip message." Class= "Easyui-tooltip" >hover me</a>

2. Create a cue box from JavaScript.

<a id= "dd" href= "javascript:void (0)" >click here</a>

$ (' #dd '). ToolTip ({position: ' Right ', content: ' <span-style= "color: #fff" >this is the "the ToolTip Message.</span > ', Onshow:function () {$ (this). ToolTip (' Tip '). css ({backgroundcolor: ' #666 ′,bordercolor: ' #666});});

Property:

Event:

Method:

The above is the jquery Easyui tutorial-tooltip (hint box) content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

