Jquery tooltip UI to show help messages with all options Methods and Events with demos

JQuery (Place your mouse here)

Options

classes
content
disabled
hide
items
position
show
track

Methods

close
destroy
disable
enable
instance
open
option
widget

Events

close
create
open

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

Type : selector
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

$( "#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>

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Tooltip

Managing width of tooltip

Subscribe

1

2

3

4