Jquery Hint Plugin

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/