Tooltip

The Tooltip plugin displays information messages anywhere in your UI.

Learn more about the Tooltip plugin.

constructor

constructor(options?: Tooltip.Options);

The ui.Tooltip constructor accepts several parameters:

target

[optional] A CSS selector or DOM element that is the target for the tooltip. When the user hovers over this element with the mouse cursor, the tooltip appears.

rootTarget

[optional] A CSS selector or DOM element that is the root target for the tooltip. When using the rootTarget, the event handlers that trigger the tooltip display will be delegated (as opposed to directly-bound). This is useful when the target is a selector pointing to elements that might get removed from the DOM, and then put back again. The tooltip tries to find the selected elements specified by the selector in the target option when it is initialized (during instantiation), and then uses these elements as the target for the tooltip. If later on, such elements are removed from the DOM, the tooltip loses a reference to the target. Therefore, we can prevent this by using rootTarget or selecting the container element and target selector for selecting the real target of the tooltip at the time of the "mouseover" event.

container

[optional] A CSS selector or DOM element that is the container element, which the tooltip is appended to. Later, when the tooltip is shown, it respects the boundary of this container, and changes its direction if it would overlap the boundary.

content

[optional] The content of the tooltip. It can be an arbitrary string/HTML or a function. The element parameter is undefined when the user calls show or toggle API methods with the point as a parameter. If the function returns null or undefined, the content is taken from data-tooltip (or an arbitrary place using the dataAttributePrefix parameter). If the function returns false, the tooltip is not displayed.

padding

[optional] The distance between the target element and the tooltip.

position

[optional] The position of the element relative to the tooltip. left means the element is on the left of the shown tooltip. It can be either top, left, bottom, right.

direction

[optional] The direction of the tooltip arrow. It can be either top, right, bottom, left or auto. auto sets the arrow accordingly to position property. Arrows are disabled if the direction is a falsy value or off.

positionSelector

[optional] A CSS selector, DOM element, or function used to compute the position of the edge of the tooltip. It defines a bounding box which the tooltip mustn't get across.

trigger

[optional] Event which makes the tooltip show up. It can be either hover, focus or click. This option cannot be set as a data attribute on the DOM element.

minResizedWidth

[optional] The minimal width of the tooltip. The tooltip width can be resized down to the minResizedWidth. If the available space is smaller than the minResizedWidth, the direction of the tooltip is changed to its opposite direction (left tooltip is swapped to right, top to bottom and vice versa). Set minResizedWidth to a falsy value if no automatic resizing or direction swapping should take place. It defaults to 100.

hideTrigger

[optional] Event which makes the tooltip disappear. It can be any of the DOM events. Separate multiple events with ' '.

<label data-tooltip="tooltip text" data-tooltip-hide-trigger="mouseout mouseover">HIDE ON MOUSEOUT</label>

or

new joint.ui.Tooltip({
    rootTarget: '.click-tooltip',
    target: '[data-tooltip]',
    trigger: 'click',
    hideTrigger: 'mouseout'
});

viewport

viewport defines the boundary for the tooltip. It guarantees that the tooltip's content will be rendered inside the viewport bounding box.

selector

[optional] A CSS selector or Element defining the viewport DOM object. The element triggering the tooltip should be rendered inside this element.

padding

[optional] Minimal distance from the viewport boundaries.

dataAttributePrefix

[optional] Defines a prefix for HTML data attributes with the tooltip configuration.

new joint.ui.Tooltip({
    target: '[custom-def]',
    dataAttributePrefix: 'custom-def'
});

It matches with:

<label data-custom-def="Tooltip content" data-custom-def-position-selector=".box2" data-custom-def-position="bottom">BOTTOM</label>

animation

[optional] When set to true a CSS fade-in animation is applied to the tooltip. Passing an object with any of the following properties allows you to make further adjustments to the animation.

duration

CSS animation-duration. The default is '500ms'.

delay

CSS animation-delay. The default is '400ms'.

timingFunction

CSS animation-timing-function. The default is '400ms'.

Methods

show()

tooltip.show(options?: Tooltip.RenderOptions): void;

Shows current instance of the tooltip. The method accepts an optional options parameter which may contain a target (CSS selector or DOM Element) and/or coordinates (x and y) at which to create the tooltip.

hide()

tooltip.hide(): void;

Hides current instance of the tooltip.

toggle()

tooltip.toggle(options?: Tooltip.RenderOptions): void;

Toggles current instance of the tooltip. The method accepts an optional options parameter which may contain a target (CSS selector or DOM Element) and/or coordinates (x and y) at which to create the tooltip.

isVisible()

tooltip.isVisible(): boolean;

Returns true if the tooltip is hidden. Otherwise, it returns false.

disable()

tooltip.disable(): void;

Prevent the showing of the tooltip from user interaction.

enable()

tooltip.enable(): void;

Make the tooltip start showing on user interactions (after it was disabled).

isDisabled()

tooltip.isDisabled(): boolean;

Returns true if the tooltip is disabled (see disable()). Otherwise, it returns false.

Events

close

Triggered when the tooltip gets closed.

Types

Animation

interface Animation {
    duration?: number | string;
    delay?: number | string;
    timingFunction?: string;
    [key: string]: any;
}

Options

interface Options extends mvc.ViewOptions<undefined> {
    position?: TooltipPosition | ((element: Element) => TooltipPosition);
    positionSelector?: string | ((element: Element) => Element);
    direction?: TooltipArrowPosition;
    minResizedWidth?: number;
    padding?: number;
    rootTarget?: mvc.$Element;
    target?: mvc.$Element;
    container?: mvc.$Element;
    trigger?: string;
    viewport?: {
        selector?: mvc.$Element;
        padding?: number;
    };
    dataAttributePrefix?: string;
    template?: string;
    content?: mvc.$Element | ((this: Tooltip, node: Node, tooltip: Tooltip) => mvc.$Element | false | null | undefined);
    animation?: boolean | Animation;
}

RenderOptions

interface RenderOptions {
    target?: string | Element,
    x?: number,
    y?: number
}

TooltipArrowPosition

enum TooltipArrowPosition {
    Left = 'left',
    Top = 'top',
    Bottom = 'bottom',
    Right = 'right',
    Auto = 'auto',
    Off = 'off'
}

TooltipPosition

enum TooltipPosition {
    Left = 'left',
    Top = 'top',
    Bottom = 'bottom',
    Right = 'right'
}