EasyUI series (6)-Tooltip (prompt box) and easyui-tooltip

EasyUI series (6)-Tooltip (prompt box) and easyui-tooltip

I. Create Components

0. Tooltip does not depend on other components

1. Use class to load

<A href = "#" class = "easyui-tooltip" title = "this is a prompt message"> Hover me </a>

2. Load with js

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip () ;}) </script>

Ii. Attributes

1. position: the position of the message frame (left, right, top, bottom by default)

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip () ;}) </script>

2. content: the content of the message box, which can be html

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({content: "<strong> I am html </strong>"}) ;}) </script>

3. When trackMouse is set to true, the prompt box and mouse can be moved.

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({trackMouse: true}) ;}) </script>

4. deltaX, deltaY: the location in the upper left corner of the prompt box

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({deltaX: 50, deltaY: 50}) ;}) </script>

5. How many milliseconds does showDelay and hideDelay delay show/hide the prompt box? The default value is 200.

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({showDelay: 1000, hideDelay: 2000}) ;}) </script>

6. showEvent and hideEvent: the prompt box when the show/hide event is activated. The default value is mouseenter and mouseleave.

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({// show the showEvent: "click" in the prompt box, // double-click the mouse to hide the prompt box hideEvent: "dblclick"});}) </script>

Iii. Events

1. onShow, onHide: triggered when the prompt box is displayed/hidden

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({onShow: function (e) {alert ("trigger in the prompt box") ;}, onHide: function (e) {alert ("Hide trigger in prompt box") ;}}) ;}) </script>

2. onUpdate: triggered when the content in the prompt box is updated. The default content is null.

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({content: "This is new content", onUpdate: function (content) {alert ("content updated:" + content) ;}) </script>

3. onPosition: triggered when the position of the prompt box is changed

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({onPosition: function (left, top) {console. log ("left:" + left + ", top:" + top) ;}}) ;}) </script>

4. onDestroy: triggered when the prompt box is canceled

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({onDestroy: function (none) {alert ("prompt box destroyed") ;}}); $ ("# tBox "). click (function () {$ (this ). tooltip ("destroy") ;}) </script>

Iv. Methods

1. options: property object returned

2. show, hide: show/hide prompt box

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({}); $ ("# tBox "). tooltip ("show"); $ ("# tBox "). tooltip ("hide") ;}) </script>

3. update: update content

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({}); // triggered when you move the cursor to "Hover me" $ ("# tBox "). tooltip ("update", "updated content") ;}) </script>

4. tip: returns the tip Element Object. arraw returns the arrow Element Object (actually two divs generated in the prompt box)

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({onShow: function () {// div. tooltip. tooltip-bottom console. log ($ ("# tBox "). tooltip ("tip"); // div. tooltip. tooltip-outer, div. tooltip-arrow console. log ($ ("# tBox "). tooltip ("arrow") ;}}) ;}) </script>

5. reposition: reset the position of the prompt box.

<A href = "#" id = "tBox" title = "this is a prompt message"> Hover me </a> <script >$ (function () {$ ("# tBox "). tooltip ({onShow: function () {$ (". tooltip-bottom ").css (" left ", 500) ;}, onHide: function () {$ (" # tBox "). tooltip ("reposition") ;}}) ;}) </script>

5. Default component values

$.fn.tooltip.defaults.position = "right";