A tooltip is a small overlay that sits over the main page that can be used to provide content or functionality that does not need to be always visible. Tooltips usually look like a small box or callout and can be trigged by a wide range of events.
Demo
Visit demo page to see jtooltip behavior and code example.
Project Requirements
Mandatory
There are a few requirements you need to meet before you can use jTooltip as a tooltip renderer, the most obvious of which is the inclusion of the jQuery library 1.3. You can grab the latest version here.
Position utility: jTooltips employ collision detection and iframe protection via the Wiki Position utility.
Template plugin to get posibility create template strings for dynamic data load via JSON.
Optional
bgiframe plugin to fix select-problems in IE, just include to apply to tooltip;
Downloading jTooltip
It is recommended you download the latest version of jTooltip to ensure you have the latest bug fixes and features available to date. You can do this by visiting our download page which contain all Lastest information and bug tracking information.
Installation
Installing jTooltip is relatively straight forward. Simply include requirement files using script html element(s), like so:
Notice the jQuery library is included before jTooltip. This is absolutely essential for correct functioning of the library and its accompanying methods.
<script type="text/javascript" src="jqueryJS/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryJS/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="jqueryJS/jquery.bgiframe.js"></script>
<script type="text/javascript" src="http://jquery-template.googlecode.com/svn/trunk/jquery.template-0.3.js"></script>
<script type="text/javascript" src="jqueryJS/jquery.ui.position.js"></script>
<script type="text/javascript" src="../jquery.jtooltip.js"></script>
<link type="text/css" rel="stylesheet" href="jqueryJS/jquery-ui-1.7.2.custom.css" />
<link type="text/css" rel="stylesheet" href="../jquery.jtooltip.css" />
* This source code was highlighted with Source Code Highlighter.
Properties
jTooltip has this properties:
Delay:
delay: 200
Default options mimic the standard behaviour: The tooltip appears after a short delay and stays where it was activated. The delay option lets you remove that (delay: 0) or change the length.
Effects:
fade: false
Set this value false to disable fade effect or numeric value to fade in tooltip element in value msecond. For more information see fadein effect page
Extra CSS classes:
tooltipClass: "ui-widget-content ui-corner-all"
Change this property when you want customize tooltip just change default string. It will add this extra classes to tooltip that was viewed.
Handle text and DOM elements in the tooltip:
template: ""
template string that convert JSON data to user friendly view. For more information see template plugin.
please set also parameter loadURL or declare callback function getJSONparams to give possibility to tooltip get JSON parameters
URL load JSON data:
loadURL: ""
url to download JSON data for display tooltip content. If you declare callback function getJSONparams jTooltip call this function to get parameters which it send to server.
Offset and Position:
Set offset value of tooltip element according to parent element
top: 10 //offset top
left: 15 //offset left
position_at: 'right bottom', //this is at parameter in position plugin
position_my: 'left center', //this is my parameter in position plugin
For all possible values please see position plugin.
Element id:
id: "tooltip"
When you create widget tooltip it add after current element div element with "ui-tooltip" class and id generate in such way: DOM_element_id + id. By default id is "tooltip". Please, notice when DOM element doesn't have it own id jtooltip'll create unique id by getMilliseconds() function of current Date.
Example of jtooltip creation
jtt = $("#lblUserName").jtooltip({
delay: 100,
fade: 250,
loadURL: 'http://example.com/JSon.php',
template: '<div style="color:red"> Thank you. <br /> {foreach:} <p style="color: green; margin: 10px;"> Wine - {wine} </p> <span>Sugar - {sugar} </span> <span> Lemon is {lemon} </span> {/foreach:} </div>',
getJSONparams: function (el) { return { name: "John", time: "2pm" }; }
});
* This source code was highlighted with Source Code Highlighter.
Methods
There is some methods:
show: function ()
For show tooltip programmatic not via mouseover message can call show method:
$(selector).jtooltip("show");
repaint: function ()
If jtooltip has been already shown but you change inner text or position parameters call this function for recalculate position and move to new location.
$(selector).jtooltip("repaint");
hide: function ()
If jtooltip has been already shown but you want hide it just call this function
$(selector).jtooltip("hide");
setTooltipTitle: function (str)
Change title value call this function. Please, notice that it doesn't show or hide tooltip. To do this call show()/hide() function.
Events
Notice that event is fired only when tooltip was shown automatically.
onshow when jtooltip is showing
jtt.bind('onshow', function() {
//print code here for action on tooltip showing
} );
onhide when jtooltip is hiding
jtt.bind('onhide', function() {
//print code here for action on tooltip showing
} );
Callback Functions
In this functions you have such context:
this - current widget
this.element[0] - JQuery DOM element which create this widget
el = this.element[0]
1. To fill parameters that will be send to server which make JSON parameters response
getJSONparams
getJSONparams: function (el) { return { name: this.element[0].value }; }
2. bodyhandler
You want to make tooltip customized but you don't want use any template string with server load or local load (I can't understand why but anyway) just declare this callback function and return string. It will be placed in the jtooltip area.
bodyhandler: function (el) { return "This is example that give tooltip easy to use. This edit value = " + el.value; }
In this simple way you can make you jtooltip interactive
Style
All jtooltip widgets have class: "ui-tooltip". And this special classes contain in the jquery.jtooltip.css file.
You can customize jtooltip view using ThemeRoller because it is using "ui-widget" style class and by default using "ui-widget-content, ui-corners-all" style classes.
Examples
Please visit this page to see jtooltip behavior and code example. To see how easy it is. You will love it from the first time you try it. Try this. Also it is very important to us to get you feedbacks. Please feel free to write comments.
Support
Please post questions to the jQuery discussion list, putting (tooltip) into the subject of your post, making it easier to spot it and respond quickly. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
Please post bug reports and other contributions (enhancements, features) to the project bug tracker list.
Сообщения
Комментариев нет:
Отправить комментарий