Tooltip

Keep the tooltip open if user moves the mouse over it.

If this is not explicitly configured as false, then this is automatically set when there are any visible, interactive child items added such as tools, or items which are interactive such as buttons or input fields.

Set to true to anchor tooltip to the triggering target. If set to false, the tooltip will align to the mouse position. When set to false, it will also set anchor: false to hide anchor arrow.

By default, a Tooltip is transient, and will hide when the user clicks or taps outside its widget. Configure as false to make a Tooltip non-transient when user clicks outside it.

If you would like the Tooltip to stay visible when mouse leaves the Tooltip target, please see {#config-autoHide}.

By default, a Tooltip is transient, and will hide when the mouse exits the target element. Configure as false to make a Tooltip non-transient.

Show immediately when created

The time (in milliseconds) that the Tooltip should stay visible for when it shows over its target. If the tooltip is anchored to its target, then moving the mouse during this time resets the timer so that the tooltip will remain visible.

Defaults to 0 which means the Tooltip will persist until the mouse leaves the target.

DOM element to attach tooltip to. By default, the mouse entering this element will kick off a timer (see hoverDelay) to show itself.

If the forSelector is specified, then mouse entering matching elements within the forElement will trigger the show timer to start.

Note that when moving from matching element to matching element within the forElement, the tooltip will remain visible for hideDelay milliseconds after exiting one element, so that rapidly entering another matching element will not cause hide+show flicker. To prevent this behaviour configure with hideDelay: 0.

A CSS selector which targets child elements of the forElement that should produce a tooltip when hovered over.

A method, or the name of a method called to update the tooltip's content when the cursor is moved over a target. It receives one argument containing context about the tooltip and show operation. The function should return a string, or a Promise yielding a string.

new Grid({
    title    : 'Client list',
    appendTo : myElement,
    store    : myStore,
    columns  : myColumns,
    tbar     : {
        items : {
            text : 'Reload,
            tooltip : {
                // Will look in ownership hierarchy for the method
                // which will be found on the grid.
                getHtml : 'up.getReloadButtonTip'
            }
        }
    },
    getReloadButtonTip() {
        return `Reload ${this.title}`;
    }
});

The time (in milliseconds) for which the Tooltip remains visible when the mouse leaves the target.

May be configured as false to persist visible after the mouse exits the target element. Configure it as 0 to always retrigger hoverDelay even when moving mouse inside fromElement

By default, when moving rapidly from target to target, if, when mouseovering a new target, the tip is still visible, the tooltip does not hide, it remains visible, but updates its content however it is configured to do so.

Configure hideOnDelegateChange : true to have the tip hide, and then trigger a new show delay upon entry of a new target while still visible.

The amount of time to hover before showing

The message to show while an async tooltip is fetching its content.

Horizontal offset from mouse when anchorToTarget is false.

Direction independent, the value is internally flipped (by multiplying it with -1) for RTL.

Vertical offset from mouse when anchorToTarget is false

Predefined style to use for the tooltip. Possible values are:

• 'plain' - Compact rendition for simple text
• 'rich' - Rich rendition for complex content

The supplied value will be part of the tooltip's class list, as b-{rendition}-tooltip.

When left out, the rendition to use will be determined by the content of the tooltip.

Show on hover

By default, once a tooltip is shown aligned as requested, it stays put.

Setting this to true causes the tooltip to be aligned by the mouse, offset by [mouseOffsetX, mouseOffsetY] and keeps the tooltip aligned to the mouse maintaining the configured offsets as the mouse moves within its activating element.

Get/set the HTML to display. When specifying HTML, this widget's element will also have b-html added to its classList, to allow targeted styling. To create async tooltip and show the loadingMsg, see code below: For example:

new Tooltip({
    listeners : {
        beforeShow : ({ source : tip }) => {
            tip.showAsyncMessage();
            AjaxHelper.get('someurl').then(response => tip.html = 'Done!');
        }
    }
});

The HTML element that triggered this Tooltip to show

Updated dynamically with the current element that the mouse is over. For use when showing a Tooltip from code which is not triggered by a pointer event so that a tooltip can be positioned.

The amount of time to hover before showing

Predefined style to use for the tooltip. Possible values are:

• 'plain' - Compact rendition for simple text
• 'rich' - Rich rendition for complex content

The supplied value will be part of the tooltip's class list, as b-{rendition}-tooltip.

When left out, the rendition to use will be determined by the content of the tooltip.

Set this to true to have the shared tooltip pop up to show the full text for elements which have overflowing text and have text-overflow:ellipsis.

The DOM event that triggered this tooltip to show

Shows a spinner and a message to indicate an async flow is ongoing