[JS Open Source Component Development]tip hint component

Tip Tip Component

Common application scenarios, it is always inevitable to encounter the prompt information, such as the display is not complete when you need to move the mouse to display the title, such as the validation of the error prompt, such as the operation of the auxiliary instructions, such as buttons, so I came out of a small JS component, Tip tip component. The effect is as follows:

This is probably the case, not complicated things, but also very practical.

Please click here for demo Example http://lovewebgames.com/jsmodule/tip.html

It's source hosted on GitHub click here Https://github.com/tianxiangbing/tip

<table style="width:100%;"><tr> <td> <input type="Button"Value="Right Hover"Id="Btn-tip-right"> </td> <td> <input type="Button"Value="Left click"Id="Btn-tip-left"> </td> <td> <input type="Button"Value="Top Click"Id="Btn-tip-top"> </td> <td> <input type="Button"Value="Click below"Id="Btn-tip-bottom"> </td> <td align=" Right"> <input type="Button"Value="by Border Click Automatic"Id="Btn-tip-auto"> </td> </tr></table>Text tip:<input type="text"Id="Txt-tip"msg="Please enter the content"> <script type="Text/javascript"Src=".. /src/jquery-1.11.2.js"></script> <script type="Text/javascript"Src=".. /src/tip.js"></script> <script>vartip =NewTip (); Tip.init ({trigger:'#btn-tip-right', Width: -, Triggerevent:'Hover', Content:'Loading ...', Ajax:function () {varDTD = $. Deferred ();//Create a new deferred object                varwait =function (DTD) {vartasks =function () {Console.log ("execution finished! "); Dtd.resolve (" This is a message. This is a hint. This is a hint. This is a message. This is a tip.");//changing the execution state of a deferred object                    }; SetTimeout (Tasks, +); returnDTD;                };                Wait (DTD); returnDTD;        }        }); vartip_left=NewTip (); Tip_left.init ({trigger:'#btn-tip-left', Triggerevent:'Click', Content:'this is a message.', Position:' Left'            }); vartip_top=NewTip (); Tip_top.init ({trigger:'#btn-tip-top', Triggerevent:'Click', Content:'this is a message.', Position:'Top'            }); varTip_bottom=NewTip (); Tip_bottom.init ({trigger:'#btn-tip-bottom', Triggerevent:'Click', Content:'this is a message.', Position:'Bottom'            }); vartip_auto=NewTip (); Tip_auto.init ({trigger:'#btn-tip-auto', Triggerevent:'Click', Width: -, Content:' This is a hint, this is a message.', Inviewport:true            }); varT = $ ('#txt-tip'). Tip ({content:$ ('#txt-tip'). attr ('msg'), Triggerevent:'Focus'        })[0]; </script>

API Properties Trigger: [$|dom|string]

Trigger element, jquery object or DOM or string

Triggerevent: [click|hover|focus]

Trigger event, default is hover, event is delegated on delegate parameter, focus does not delegate

Delegate [dom|string]

The default delegate to Body,focus is not valid for the delegate node of the event.

Tpl [string]

class="ui-tip"class="ui-tip-content " class="ui-tip-arrow"><i></i><em></em></ Div></div>

Offset {x:0,y:0}

Offset, default x:0, y:0

Width [number]

Wide

　　

Height [number]

High

　　

ZIndex: 999

Z-index

　　

Content:[string|$]

Hint content, here can be a string or a node, because the inside is called the $ (). HTML method, dynamic set SetContent method

　　

Inviewport: bool

is self-fitting window position, default false

Position [‘right‘|‘left‘|‘top‘|‘bottom‘]

Display location, default ' right '

Ajax: function

returns a promise with the following parameter promise: Ajax:function () {varDTD = $. Deferred ();//Create a new deferred object            varwait =function (DTD) {vartasks =function () {Console.log ("execution finished! "); Dtd.resolve ("this is a message.");//changing the execution state of a deferred object                }; SetTimeout (Tasks, +); returnDTD;            };            Wait (DTD); returnDTD; }    

Method SetContent: function(content)

Set prompt content

Stop function()

Stop display

Start function

Start Display

Event or Callback callback: function

Callback on display

[JS Open Source Component Development]tip hint component