Tooltip



Classes
Type : Object
Default :
{
  "ui-tooltip": "ui-corner-all ui-widget-shadow"
}
To get the associated Class of the Tab
var present_class = $( "#my_tooltip" ).tooltip( "option", "classes.ui-tooltip" );
To Set the class
$("#my_tooltip").tooltip("option","ui-state-error");
content
Type : Function or String or element or jQuery
Default : Title attribute of the element
{
  content: "This is from content"
}
To get the associated content of the Tab
var present_content = $( "#my_tooltip" ).tooltip( "option", "content" );
To Set the content
$( "#my_tooltip" ).tooltip( "option", "content", 'My Title here');
Details of the records of a database table can be displayed as tooltip or help message by using JQuery UI tooltip.
disabled
Type : Boolean
Default : false
$( "#my_tooltip" ).tooltip({
disabled:false
});
Specify tooltip to be disabled
$( "#my_tooltip" ).tooltip({
disabled:true   
});
Getting tooltip option disabled value
var status = $( "#my_tooltip" ).tooltip( "option", "disabled" )
To Set the disabled option
$( "#my_tooltip" ).tooltip( "option", "disabled", true)
We can enable or disable specific tooltip by using above code. While setting the disabled option we will use one array having tab numbers to disable.
hide
Type : Boolean or String or number or object
Default : true

Boolean : No animation, tooltip will be closed immediately if set to false, if it is set to True then the tooltip will fade out with default duration and default easing.
Number : Duration of animation while closing the tooltip in millseconds
string : Specified effect can be used while closing. Available effect list
Object: properties with object.
$( "#my_tooltip" ).tooltip({
hide: { effect: "slide", duration: 800 }
});
Getting hide option value
var status = $( "#my_tooltip" ).tooltip("option", "hide");
To Set the show option value
$("#my_tooltip").tooltip( "option", "hide", {effect: 'blind', duration: 800} );
We can select and set hide option value by using radio buttons. We can read the associated value and display
items
Thpe : slector
Default : [title]

Which item you want to show as tooltiop, by default it is title. You can show other cotnent also by specifying item.
Changes to this option has to match with content option.
$( "#my_tooltip" ).tooltip({
items:
});
Getting items option value
var status = $( "#my_tooltip" ).tooltip("option", "items");
To Set the items option value
$("#my_tooltip").tooltip( "option", "items", 'img[alt]' );
We can select and set items option value by using radio buttons. We can read the associated value and display the same.
position
Type : object
Default : { my: "left top+15", at: "left bottom", collision: "flipfit" }

$( "#my_tooltip" ).tooltip({
position: { my: "left+15 center", at: "right center" }
});
Getting position option value
var option_obj = $( "#my_tooltip" ).tooltip( "option" );
$('#d2').html( "position my : "  + option_obj.position.my + " , position at : "  + option_obj.position.at);
To Set the position option value
$("#my_tooltip").tooltip( "option", "position", { my: "left top", at: "right bottom"})
We can select and set position option value by using radio buttons. We can read the associated value and display the same.
show
Type : Boolean or String or number or object
Default : true

Boolean : No animation, tooltip will be closed immediately if set to false, if it is set to True then the tooltip will fade out with default duration and default easing.
Number : Duration of animation while closing the tooltip in millseconds
string : Specified effect can be used while closing. Available effect list
Object: properties with object.
$( "#my_tooltip" ).tooltip({
show: { effect: "slide", duration: 500 }
});
Getting show option value
var status = $( "#my_tooltip" ).tooltip("option", "show");
To Set the show option value
$("#my_tooltip").tooltip( "option", "show", {effect: 'blind', duration: 800} );
We can select and set show option value by using radio buttons. We can read the associated value and display
track
Type : Boolean
Default : false
$( "#my_tooltip" ).tooltip({
track:false
});
Specify status of track
$( "#my_tooltip" ).tooltip({
track:true   
});
Getting tooltip option track value
var status = $( "#my_tooltip" ).tooltip( "option", "track" )
To Set the track option
$( "#my_tooltip" ).tooltip( "option", "track", true)
We can set track option to true of false using above code. While setting the track option we will use radio buttons .
Methods
close()
Invoke the close method
$( "#my_tooltip" ).tooltip( "close" );
Destroy()
Removes the functinality
$( "#my_tooltip" ).tooltip( "destroy" );
disable()
Disable the tooltip
$( "#my_tooltip" ).tooltip( "disable" );
enable()
Enable the tab (previously disabled ) (all tooltip )
$( "#my_tooltip" ).tooltip( "enable" );
instance()
Retrive tooltip instance object
$( "#my_tooltip" ).tooltip( "instance" );
open()
Open tooltip Programmatically
$( "#my_tooltip" ).tooltip( "open" );
option()
Get the value of the given Option name
var p_active = $( "#my_tooltip" ).tooltip( "option", "content" )
We can get all the options with value by using an object containing key value pairs.
widget()
Invoke the widget method
var widget = $( "my_tooltip" ).tooltip( "widget" );
Events
close()
Triggered when tooltip is closed
$( "#my_tooltip" ).tooltip({
  close: function( event, ui ) {}
});
create()
Triggered when tooltip is created
$( "#my_tooltip" ).tooltip({
  create: function( event, ui ) {}
});
open()
Triggered when tooltip is epened
$( "#my_tooltip" ).tooltip({
  open: function( event, ui ) {}
});
Event listener
$( "#my_tooltip" ).on( "tooltipopen", function( event, ui ) {} );

Managing width of tooltip

<style>
.ui-tooltip {
width: 800px; // Change this value
}
</style>
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer