jQuery UI Tooltip

jQuery UI Tooltip replaces the browser's basic title tooltip with a themeable widget that can use custom content, positioning, effects and events.

Basic Tooltip Top ↑

$( function () {
    $( "#tooltip-area" ).tooltip();
});

Scope the widget to the part of the page that needs enhanced tooltips instead of attaching it to the entire document when that would affect unrelated title attributes.

Tooltip Options Top ↑

classes

Customize structural classes such as ui-tooltip.

$( "#my_tooltip" ).tooltip({
    classes: {
        "ui-tooltip": "ui-state-highlight"
    }
});

const currentClass =
    $( "#my_tooltip" ).tooltip(
        "option",
        "classes.ui-tooltip"
    );

$( "#my_tooltip" ).tooltip(
    "option",
    "classes.ui-tooltip",
    "ui-state-error"
);

Open demo →

content

Provide a string, element, jQuery object or function that returns the tooltip content.

$( "#my_tooltip" ).tooltip({
    content: "This is custom tooltip content"
});

const content =
    $( "#my_tooltip" ).tooltip(
        "option",
        "content"
    );

$( "#my_tooltip" ).tooltip(
    "option",
    "content",
    "My title here"
);

Open demo →

Open demo →

disabled

Disable or enable Tooltip.

$( "#my_tooltip" ).tooltip({
    disabled: true
});

const disabled =
    $( "#my_tooltip" ).tooltip(
        "option",
        "disabled"
    );

$( "#my_tooltip" ).tooltip(
    "option",
    "disabled",
    false
);

Open demo →

Open demo →

hide

Control how the tooltip disappears.

$( "#my_tooltip" ).tooltip({
    hide: {
        effect: "slide",
        duration: 800
    }
});

$( "#my_tooltip" ).tooltip(
    "option",
    "hide",
    {
        effect: "blind",
        duration: 800
    }
);

Open demo →

Open demo →

Open demo →

items

Choose which descendants can show tooltips. Keep this selector aligned with the content option when custom content is used.

$( "#my_tooltip" ).tooltip({
    items: "img[alt], [title]"
});

const items =
    $( "#my_tooltip" ).tooltip(
        "option",
        "items"
    );

$( "#my_tooltip" ).tooltip(
    "option",
    "items",
    "img[alt]"
);

Open demo →

Open demo →

position

Position the tooltip relative to the target.

$( "#my_tooltip" ).tooltip({
    position: {
        my: "left+15 center",
        at: "right center"
    }
});

const position =
    $( "#my_tooltip" ).tooltip(
        "option",
        "position"
    );

$( "#my_tooltip" ).tooltip(
    "option",
    "position",
    {
        my: "left top",
        at: "right bottom"
    }
);

Open demo →

show

Control how the tooltip appears.

$( "#my_tooltip" ).tooltip({
    show: {
        effect: "slide",
        duration: 500
    }
});

$( "#my_tooltip" ).tooltip(
    "option",
    "show",
    {
        effect: "blind",
        duration: 800
    }
);

Open demo →

Open demo →

Open demo →

track

When true, the tooltip follows the pointer while it is open.

$( "#my_tooltip" ).tooltip({
    track: true
});

const track =
    $( "#my_tooltip" ).tooltip(
        "option",
        "track"
    );

$( "#my_tooltip" ).tooltip(
    "option",
    "track",
    false
);

Open demo →

Open demo →

Tooltip Methods Top ↑

close()

Close an open tooltip.

$( "#my_tooltip" ).tooltip( "close" );

destroy()

Remove Tooltip behavior.

$( "#my_tooltip" ).tooltip( "destroy" );

Open demo →

disable()

Disable Tooltip.

$( "#my_tooltip" ).tooltip( "disable" );

Open demo →

Open demo →

enable()

Enable Tooltip.

$( "#my_tooltip" ).tooltip( "enable" );

Open demo →

instance()

Return the Tooltip widget instance.

const instance = $( "#my_tooltip" ).tooltip( "instance" );

open()

Open the tooltip for the matched element programmatically.

$( "#my_tooltip" ).tooltip( "open" );

option()

Read one option or the complete option object.

const content = $( "#my_tooltip" ).tooltip( "option", "content" );
const options = $( "#my_tooltip" ).tooltip( "option" );

Open demo →

widget()

Return the generated tooltip widget as a jQuery object.

const widget = $( "#my_tooltip" ).tooltip( "widget" );

Tooltip Events Top ↑

close

Fires when a tooltip closes.

$( "#my_tooltip" ).tooltip({
    close: function ( event, ui ) {
        console.log( "Tooltip closed" );
    }
});

create

Fires when Tooltip is initialized.

$( "#my_tooltip" ).tooltip({
    create: function ( event, ui ) {
        console.log( "Tooltip created" );
    }
});

open

Fires when a tooltip opens. You can also listen for the namespaced tooltipopen event.

$( "#my_tooltip" ).tooltip({
    open: function ( event, ui ) {
        console.log( "Tooltip opened" );
    }
});

$( "#my_tooltip" ).on(
    "tooltipopen",
    function ( event, ui ) {
        console.log( "tooltipopen event" );
    }
);

Manage Tooltip Width Top ↑

.ui-tooltip {
    max-width: 24rem;
}

Prefer a responsive max-width over a fixed 800-pixel width so the tooltip remains usable on smaller screens.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: