Tooltip extends Floater

Assign a message to show on hover.

Example

JS — delegate from a container
Tooltip.delegate(document.body, { placement: 'top' })
HTML — markup picked up by delegate
<button data-tooltip="Save your work" data-tooltip-placement="bottom">Save</button>
JS — single anchor (manual)
new Tooltip({
    anchor: document.querySelector('#hi-button'),
    content: "Hello World"
}).show()

Constructor

new Tooltip(options)
options : Object optional
timeout : number optional

ms to wait until hiding after mouseout

scope : string optional

showing a tooltip will hide all other tooltips of same scope

anchor : HTMLElement

element to anchor positioning to

container : string | HTMLElement optional

element to append floater to. If String, then used as selector for this.closest(selector)

placement : string optional

how the floater is anchored, e.g. "top", "top-start", "top-end", "left", "left-start"...

strategy : string optional

how the floater is positioned in the document. "absolute" or "fixed"

flip : boolean | Object optional

See https://floating-ui.com/docs/flip, defaults to false in favor of autoPlacement

offset : boolean | Object optional

See https://floating-ui.com/docs/offset

shift : boolean | Object optional

See https://floating-ui.com/docs/shift

arrow : boolean | number optional

True to show default size, or number in pixels

size : boolean | Object optional

See https://floating-ui.com/docs/size

autoPlacement : boolean | Object optional

See https://floating-ui.com/docs/autoPlacement

inline : boolean | Object optional

See https://floating-ui.com/docs/inline

autoUpdate : boolean | Object optional

See https://floating-ui.com/docs/autoUpdate#options

removeOnBlur : boolean optional

hide floater on outside click/focus or escape key

onShow : function optional

event listener for show (cancellable, fires before showing)

onShown : function optional

event listener for shown (fires after showing)

onHide : function optional

event listener for hide (cancellable, fires before hiding)

onHidden : function optional

event listener for hidden (fires after hiding)

content : string | HTMLElement | Array | Object optional

content to append to element. Passed to Dolla's content

Static Properties

P   assignableAttributes: Object

Attributes settable via constructor options. Each key is the attribute name and the value is a schema object describing how to handle it.

Example

static assignableAttributes = {
    anchor: { type: 'HTMLElement', default: null, null: true },
    placement: { type: 'string', default: 'bottom', null: false },
    enabled: { type: 'boolean', default: true, null: false },
    data: { type: 'array', default: [], null: false }
}

Properties

type : string | Array.<string>

expected type(s): 'string', 'number', 'boolean', 'object', 'array', 'function', or a class/element name like 'HTMLElement'

default : *

default value when none is provided

null : boolean

whether null is an acceptable value

load : function optional

optional transform applied when reading the attribute value

P   assignableMethods: Array

Methods overridable via constructor options

P   bindMethods: Array

Methods to auto-bind to this

P   events: Array

Event names that can be bound via onEventName constructor options

P   style: string

CSS injected once per component via adoptedStyleSheets

P   styleLayer: string | false

CSS @layer name used to wrap the component's styles when injected via adoptedStyleSheets. Set to a falsy value to disable layering.

P   watch: Array

Attributes to observe for changes. Triggers changed(attribute, was, now) and [attribute]Changed(was, now) callbacks.

Instance Methods

F   addEventListenerFor(element, eventType, args)

Listen for events on another element, automatically cleaned up when this component disconnects

Parameters

element : HTMLElement

element to listen on

eventType : string

event type

args : *

additional arguments passed to addEventListener

F   anchorChanged()

Reassigning anchor on a floater that's already showing repositions it to the new anchor — the autoUpdate loop follows along.

F   bindAutoUpdate()

Bind floating-ui's autoUpdate loop to the current anchor, tearing down any loop bound to a previous one. Called on connect and whenever anchor changes while connected.

F   changed(attribute, was, now)

Called every time an observed attribute changes. Attribute must be listed in static watch.

Parameters

attribute : string

the attribute that changed

was : *

previous value

now : *

new value

F   connected()

Called when element is connected to the DOM

F   disconnected()

Called when element is disconnected from the DOM

F   initialize()

Called once per instantiation, but only after element is connected to the DOM

F   remove(eventOptions) → KompElement

Remove element. Fires remove, removes from DOM, then fires removed.

Parameters

eventOptions : Object optional

CustomEvent options for the remove and removed events. Data belongs on detail.

Returns

F   setContent(value) → Floater

Replace the floater's content, keeping the arrow locator that the arrow middleware holds a reference to. Use this rather than dolla's content(), which replaces every child and would orphan the locator.

Parameters

value : string | HTMLElement | Array | Object

passed to Dolla's content

Returns

Floater

this

F   toggle(shouldHide, eventOptions) → Floater

Toggle the floater visibility

Parameters

shouldHide : boolean optional

explicitly show or hide. If omitted, toggles based on current visibility.

eventOptions : Object optional

CustomEvent options passed to the resulting show/hide events

Returns

Floater

this

F   trigger(eventName, args)

Trigger an event on this element

Parameters

eventName : string

event name to trigger

args : *

additional arguments

Static Methods

F   delegate(container, defaults) → function

Delegate tooltip behavior from a container element. A single set of listeners is attached to container; any descendant with a data-tooltip attribute (or title, which is stripped to suppress the browser's native tooltip) will show a Tooltip on mouseover/focus.

Per-element options are read from data-tooltip-* attributes (e.g. data-tooltip-placement="bottom").

One Tooltip instance is created and then re-pointed from element to element — reassigning anchor and calling Floater#setContent — so hovering across a large container doesn't churn out a custom element, an arrow and a fresh set of floating-ui middleware per anchor. A showing tooltip moves in place: no exit/enter animation, and no hide/show events, since a re-target isn't a dismissal.

Elements carrying different data-tooltip-* options get their own instance, since options like arrow, flip and timeout are only read while the element initializes.

Parameters

container : HTMLElement

element to delegate from

defaults : Object optional

default options merged into each tooltip

Returns

function

cleanup function that removes the delegation listeners

Events

E   connect

Fired before the element is connected to the DOM (cancellable)

E   connected

Fired after the element is connected to the DOM and initialized

E   disconnect

Fired before the element is disconnected from the DOM (cancellable)

E   disconnected

Fired after the element is disconnected from the DOM

E   hidden

Fired after the floater is hidden. See Floater#hide for detail.sourceEvent.

E   hide

Fired before the floater is hidden (cancellable). When the floater is dismissed in response to user input (Escape, outside click, mouseleave), event.detail.sourceEvent is the originating event.

E   remove

Fired before the element is removed (cancellable)

E   removed

Fired after the element is removed

E   show

Fired before the floater is shown (cancellable). When the floater is shown in response to user input, event.detail.sourceEvent is the originating event.

E   shown

Fired after the floater is shown. See Floater#show for detail.sourceEvent.