ASP.NET MVC Controls | ComponentOne
In This Topic
    Tooltip Class
    In This Topic
    File
    wijmo.js
    Module
    wijmo
    Derived Classes
    ChartTooltip

    Provides a pop-up window that displays additional information about elements on the page.

    The Tooltip class can be used in two modes:

    **Automatic Mode:** Use the setTooltip method to connect the Tooltip to one or more elements on the page. The Tooltip will automatically monitor events and display the tooltips when the user performs actions that trigger the tooltip. For example:

    import { Tooltip } from '@mescius/wijmo';
let tt = new Tooltip();
tt.setTooltip('#menu', 'Select commands.');
tt.setTooltip('#tree', 'Explore the hierarchy.');
tt.setTooltip('#chart', '#idChartTooltip');

    **Manual Mode:** The caller is responsible for showing and hiding the tooltip using the show and hide methods. For example:

    import { Tooltip } from '@mescius/wijmo';
let tt = new Tooltip();
element.addEventListener('click', () => {
    if (tt.isVisible) {
        tt.hide();
    } else {
        tt.show(element, 'This is an important element!');
    }
});

    The example below shows how you can use the Tooltip class to add Excel-style notes to cells in a FlexGrid control:

    {@sample Grid/CustomCells/CellNotes/purejs Example}

    Constructor

    Properties

    Methods

    Events

    Constructor

    constructor

    constructor(options?: any): Tooltip

    Initializes a new instance of the Tooltip class.

    Parameters
    • options: any Optional

      JavaScript object containing initialization data for the Tooltip.

    Returns
    Tooltip

    Properties

    cssClass

    Gets or sets a CSS class name to add to the tooltip.

    The default value for this property is an empty string.

    Type
    string

    gap

    Gets or sets the distance between the tooltip and the target element.

    The default value for the property is **6** pixels.

    Type
    number

    hideDelay

    Gets or sets the delay, in milliseconds, before hiding the tooltip if the mouse remains over the element.

    The default value for the property is **zero** milliseconds, which causes the tip to remain visible until the mouse moves away from the element.

    Type
    number

    isAnimated

    Gets or sets a value that determines whether tooltips should use a fade-in animation when shown.

    The default value for this property is **false**.

    Type
    boolean

    isContentHtml

    Gets or sets a value that determines whether the tooltip contents should be displayed as plain text or as HTML.

    The default value for the property is **true**.

    Type
    boolean

    isVisible

    Gets a value that determines whether the tooltip is currently visible.

    Type
    boolean

    position

    Gets or sets the PopupPosition where the tooltip should be displayed with respect to the owner element.

    The default value for this property is **PopupPosition.Above**.

    Type
    PopupPosition

    showAtMouse

    Gets or sets a value that determines whether the tooltip should be calculated based on the mouse position rather than the target element.

    The default value for the property is **false**, which means the tooltip position is calculated based on the target element.

    The position property is used to determine the tooltip position in respect to the target element or to the mouse position.

    Type
    boolean

    showDelay

    Gets or sets the delay, in milliseconds, before showing the tooltip after the mouse enters the target element.

    The default value for the property is **500** milliseconds.

    Type
    number

    trigger

    Gets or sets the TooltipTrigger that determines how the tooltip should be triggered.

    The default value for this property is **TooltipTrigger.Focus**.

    Type
    TooltipTrigger

    Methods

    dispose

    dispose(): void

    Removes all tooltips associated with this Tooltip instance.

    Returns
    void

    getTooltip

    getTooltip(element: any): string

    Gets the tooltip content associated with a given element.

    Parameters
    • element: any

      Element, element ID, or control that the tooltip explains.

    Returns
    string

    hide

    hide(): void

    Hides the tooltip if it is currently visible.

    Returns
    void

    onPopup

    onPopup(e: TooltipEventArgs): boolean

    Raises the popup event.

    Parameters
    Returns
    boolean

    setTooltip

    setTooltip(element: any, content: string | null, position?: PopupPosition): void

    Assigns tooltip content to a given element on the page.

    The same tooltip may be used to display information for any number of elements on the page. To remove the tooltip from an element, call setTooltip and specify null for the content.

    To remove the tooltips for all elements, call the dispose method.

    Parameters
    • element: any

      Element, single element CSS selector, or control that the tooltip explains.

    • content: string | null

      Tooltip content or ID of the element that contains the tooltip content.

    • position: PopupPosition Optional

      Position where the tooltip should be displayed with respect to the owner element.

    Returns
    void

    show

    show(element: any, content: string, bounds?: Rect, position?: PopupPosition): void

    Shows a tooltip with the specified content next to the specified element.

    Parameters
    • element: any

      Element, element ID, or control that the tooltip explains.

    • content: string

      Tooltip content or ID of the element that contains the tooltip content.

    • bounds: Rect Optional

      Optional parameter that defines the bounds of the area that the tooltip targets. If not provided, the element bounds are used.

    • position: PopupPosition Optional

      Optional parameter that specifies the position of the tooltip with respect to the reference bounds. If provided, this value overrides the setting of the position property.

    Returns
    void

    Events