Ext. tooltip and Ext. quicktips

Extjs uses Ext. tooltip and Ext. quicktips to implement the floating prompt function.

QuicktipsCodeExample: you only need to add Ext. quicktips. INIT (); to use it on the HTML page. The HTML page can be accessed through:

<Input type = "button" value = "OK" Ext: qtitle = "test" Ext: QTip = "Test content! ">

We can see the following results:

You can also customize these quicktips attributes:

Ext. Apply (ext. quicktips. getquicktip (),{

/// Maxwidth: 200,

// Minwidth: 100,

// Showdelay: 50,

// Trackmouse: True,

// Hidedelay: True,

// Closable: True,

// Autohide: false,

// Draggable: True,

Dismissdelay: 0

});

Ext. tooltip code:

New Ext. tooltip ({

Target: 'tip1 ',

HTML: 'test tooltip'

});

Add <a id = tip1 href = ""> 11 </a> to the HTML page to view the following results:

You can use tooltip to set the layer to automatically load pages through Ajax. The Code is as follows:

New Ext. tooltip ({

Target: 'ajax-tip ',

Width: 200,

Autoload: {URL: 'test/1. jsp '},

});

Add <a id = Ajax-tip href = ""> ajaxtip </a> to the HTML page to view the following results:

The opening layer can be closed. Code:

New Ext. tooltip ({

Target: 'close-tip ',

HTML: 'test close ',

Title: 'test ',

Autohide: false,

Closable: True,

Draggable: True

});

On the HTML page, add <a id = 'close-tip href = ""> 'closetip </a> to view the following results:

The opening layer moves with the mouse. Code:

New Ext. tooltip ({

Target: 'track-tip ',

Title: 'mouse track ',

Width: 200,

HTML: 'This tip will follow the mouse while it is over the element ',

Trackmouse: True,

Dismissdelay: 15000

});

On the HTML page, add <a id = track-tip href = ""> tracktip </a> to view the following results: