Extjs4 note (7) Ext. Tip. tooltip prompt

ArticleDirectory

• 1. Simplest tips
• 2. prompts that can be closed
• 3. Ajax prompts that the prompt content comes from the server
• 4. Prompt to move with the mouse
• 5. prompts with arrows
• 5. illustrated prompts
• 1. Quick prompt on the button
• 2. Custom prompt on the button

Back to the series directory

This article introduces the prompt control. extjs supports two methods to define the prompt and supports common HTML elements and general extjs UI controls.

1. Basic prompt Ext. Tip. tooltip1. simplest prompt

The following code usesCodeDefine a simple prompt. First, add a div to the HTML. When you move the cursor over the DIV, the prompt is displayed automatically. The following is the HTML content:

[HTML]

 
<Div id = "tip1" class = "tipdiv"> common prompt </div>
 

Add the following code to JS:

[JS]

 
Ext. Create ('ext. Tip. tooltip ', {target: 'tip1', HTML: 'simplest hint '});
 

OK. The first prompt is successfully added. Let's preview the effect:

2. prompts that can be closed

[HTML]

 
<Div id = "tip2" class = "tipdiv"> not automatically hidden </div>
 

[JS]

 
Ext. create ('ext. tip. tooltip ', {target: 'tip2', HTML:' click the close button ', Title: 'title', autohide: false, closable: True, draggable: true // drag allowed });
 

The result is as follows. After the mouse is removed, the system prompts that the image will not disappear. Click the cross button to close the image:

3. Ajax prompts that the prompt content comes from the server

[HTML]

 
<Div id = "tip3" class = "tipdiv"> Ajax prompt </div>
 

[JS]

 
Ext. create ('ext. tip. tooltip ', {target: 'tip3', width: 200, autoload: {URL: 'ajaxtipdata', Params: {data: "test parameter" }}, dismissdelay: 15000 // automatically hide after 15 seconds });
 

On the server side, the prompt content is returned through the action at the MVC control layer. The Code is as follows:

[C #]

 
Public contentresult ajaxtipdata (string data) {return content ("<font color = 'red'> This is the Ajax prompt: </font> <br> client parameters: "+ data );}
 

Effect:

4. Prompt to move with the mouse

[HTML]

 
<Div id = "tip4" class = "tipdiv"> follow the mouse </div>
 

[JS]

 
Ext. Create ('ext. Tip. tooltip ', {target: 'tip4', HTML: 'Tips for following the mouse ', trackmouse: True // move following the mouse });
 

Effect:

5. prompts with arrows

[HTML]

<Div id = "tip6" class = "tipdiv"> specify the direction </div>
 

[JS]

 
Ext. create ('ext. tip. tooltip ', {target: 'tid', anchor: 'buttom', // specifies the arrow pointing to top, left, right width: 120, anchoroffset: 50, // specify the position of the arrow. html: 'specifies the direction with arrows '});
 

Effect:

5. illustrated prompts

You can add images, hyperlinks, and other HTML elements to the prompt content, and customize the prompt title:

[HTML]

<Div id = "tip7" class = "tipdiv"> advanced customization </div> <Div style = "display: none; "> <Div id =" tipcontent "> <ul> <li> tip 1 </LI> <li> Tip 2 </LI> <li> Tip 3 </LI> <li> Tip 4 </LI> </ul>  </div>
 

[JS]

Ext. create ('ext. tip. tooltip ', {Title:' <a href = "#"> link title </a> ', ID: 'tooltip7', target: 'tip7 ', anchor: 'left', HTML: NULL, width: 415, autohide: false, closable: True, contentel: 'tidcontent ', // use the HTML Tag content whose ID is tipcontent as the prompt message listeners: {'render': function () {This. header. on ('click', function (e) {e. stopevent (); Ext. MSG. alert ('hprompt ', 'title clicked. '); Ext. getcmp ('tooltid7 '). hide () ;}, this, {delegate: 'A '});}}});
 

Effect:

Ii. Quick prompt Ext. Tip. quicktip

It is convenient to add specific attributes to HTML. You only need to initialize the attributes in the Code as follows:

[JS]

 
Ext. quicktips. INIT ();
 

Let's take a look at the usage:

[HTML]

 
<Div id = "tip5" class = "tipdiv" data-QTip = "prompt displayed in HTML attributes" data-qtitle = "title"> tip </div> <Div id = "tip52" class = "tipdiv" data-QTip = "quick prompt" data-qwidth = "400" data-qalign = "TL-Br"> Tip 2 </div>
 

Data-QTip:Set the body of the prompt.
Data-qtitle:Set the title of the prompt.
Data-qwidth:Set the width of the prompt.
Data-qalign:Indicates the reference point corresponding to the original with a prompt. For example, Tl-Br indicates the upper left corner of the prompt, corresponding to the lower right corner of the original.

Effect display:

3. Use the prompt on the extjs control. 1. Quick prompt on the button.

First, run the following code:

[JS]

 
Ext. quicktips. INIT ();
 

In this way, you can use the "tooltip" button configuration item:

[JS]

Ext. create ("Ext. button ", {renderto: ext. get ("tipdiv"), text: "quick prompt on the button", tooltip: "prompt information "});
 

Effect display:

2. Custom prompt on the button

[JS]

 
// The Custom prompt Ext. create ("Ext. button ", {renderto: ext. get ("tipdiv"), text: "Custom prompt on the button", ID: "Bt1"}); Ext. create ('ext. tip. tooltip ', {target: 'bt1', anchor: 'buttom', width: 120, anchoroffset: 50, HTML: 'custom prompt information on the button '});
 

Effect display:

By Lipan)
Source: [Lipan] (http://www.cnblogs.com/lipan)
Copyright: The copyright of this article is shared by the author and the blog. The detailed link of this article must be noted during reprinting; otherwise, the author will be held legally liable.