jquery Information Tip Tool
Official address: http://www.sharejs.com/code/jquery/plugin/poshytip-1.0/demo/index.html
The demo provides three examples of use, the page code is as follows:
<p>1,<aId="Tip1"title="Hi. Here's a tool tip bar! "href="#"> Mouse slide up here to see</a></p>
<br/>
<p>2, user name:<br/><inputId="User"Type="Text"size= "" " Title= "Please enter user name" /> </P>&NBSP;
<br />&NBSP;
<p >3, server call: <br/>&NBSP;
<a id= "remote" href= "#" > The mouse slides here to load the picture </A>&NBSP;
</P>&NBSP;
Of course, don't forget to load the jquery library and Poshytip plug-ins and related styles.
<scriptType="Text/javascript"src="Js/jquery.js"></script>
<script type="Text/javascript" src="Src/jquery.poshytip.js"></script>
<link rel="stylesheet" href="src/tip-yellow/tip-yellow.css " type= "Text/css" />
Jquery
1. Basic use:
$("#tip1").poshytip();
2. Form tip: When the input box has the focus, the prompt toolbar appears on the right side
$(‘#user‘).poshytip({
className: ‘tip-yellowsimple‘,
showOn: ‘focus‘,
alignTo: ‘target‘,
alignX: ‘right‘,
alignY: ‘center‘,
offsetX: 5
});
3. Service-side invocation: Get the return data by invoking the service-side ajax.php
$(' #remote '). Poshytip ({
Aligny: ' Bottom ',
Content: function (updatecallback) {
$.get (' ajax.php?id=1 ',function (msg){
Updatecallback (msg);
});
return ' Loading ... ';
}
});
List of parameters and methods
Parameters/Methods |
Describe |
Content |
Tip the content in the toolbar, which is obtained by default from the title property of the element. |
ClassName |
Tips for Styling toolbars |
Showtimeout |
Indicates the transition time before the toolbar appears |
Hidetimeout |
Indicates the transition time when the toolbar disappears |
Showon |
Tips for how the toolbar is triggered, there are ' hover ', ' focus ', ' none ' three ways |
Alignx |
Tip the toolbar appears horizontally relative to the current element's position, with ' right ', ' center ', ' left ', ' inner-left ', ' inner-right ' |
Aligny |
Tip the toolbar appears in the vertical direction relative to the current element's position, with ' bottom ', ' center ', ' top ', ' inner-bottom ', ' inner-top ' |
OffsetX |
Relative X-direction displacement, number |
OffsetY |
Relative Y-direction displacement, number |
Hidetimeout |
Transition time for tool strip to disappear |
Hidetimeout |
Transition time for tool strip to disappear |
Hidetimeout |
Transition time for tool strip to disappear |
OffsetY |
Relative Y-direction displacement, number |
Allowtiphover |
Allow the mouse to slide above the tool bar |
Fade |
Whether to use the fade fade animation, True/false |
Slide |
Whether to use slide animation, True/false |
Method: Show |
. Poshytip (' show '), manually trigger the display prompt toolbar |
Method: Hide |
. Poshytip (' hide '), manually trigger the hidden cue bar |
Method: Disable |
. Poshytip (' disable '), manually triggering the Disable ToolTips toolbar |
Method: Enable |
. Poshytip (' Enable '), manually triggering the Enable cue bar |
For more information, visit Poshy Tip's official website: http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/