Tooltip extends Floater

Assign a message to show on hover.

Example

JS
new Tooltip({
    content: "Hello World",
    anchor: '#hi-button'
})
HTML
<komp-tooltip anchor="#hi-button">
    Hello World
</komp-tooltip>

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

enabled : boolean optional

set starting state

content : string | HTMLElement | Array | Object optional

content for the floater, uses Dolla's content

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

onHide : function optional

called after hidden

onShow : function optional

called before showing

Instance Properties

P   assignableAttributes: Array | Object

Attributes settable via constructor options

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   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   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(callback) → KompElement

Remove element. Fires beforeRemove, calls optional callback, removes from DOM, then fires afterRemove.

Parameters

callback : function optional

async callback called between beforeRemove and afterRemove

Returns

F   toggle(shouldHide) → Floater

Toggle the floater visibility

Parameters

shouldHide : boolean optional

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

Returns

Floater

this

F   trigger(eventName, args)

Trigger an event on this element

Parameters

eventName : string

event name to trigger

args : *

additional arguments

Events

E   afterConnect

Fired after the element is connected to the DOM and initialized

E   afterDisconnect

Fired after the element is disconnected from the DOM

E   afterRemove

Fired after the element is removed

E   beforeConnect

Fired before the element is connected to the DOM

E   beforeDisconnect

Fired before the element is disconnected from the DOM

E   beforeRemove

Fired before the element is removed

E   hidden

Fired when the floater is hidden

E   shown

Fired when the floater is shown