Floater extends KompElement

Render content on a layer above an anchored element.

Example

new Floater({
    content: "Hello World",
    anchor: '#hi-button'
})

HTML

<komp-floater anchor="#hi-button">
    Hello World
</komp-floater>

Constructor


new Floater(options)

options :


            
                Object

optional

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 :

optional

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

offset :

optional

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

shift :

optional

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

arrow :

optional

True to show default size, or number in pixels

size :

optional

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

autoPlacement :

optional

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

inline :

optional

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

autoUpdate :

optional

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

removeOnBlur :


            
                boolean

optional

hide floater on outside click/focus or escape key

timeout :


            
                number

optional

ms to wait until hiding after mouseout

onHide :


            
                function

optional

called after hidden

onShow :


            
                function

optional

called before showing

scope :


            
                string

optional

showing a floater will hide all other floaters of same scope

Properties

showing :


            
                boolean

is floater showing, can be disconnected and not showing in case of Tooltip

Instance Properties


assignableAttributes: 
            
                Array
                |
            
                Object

Attributes settable via constructor options


assignableMethods: 
            
                Array

Methods overridable via constructor options


bindMethods: 
            
                Array

Methods to auto-bind to this


events: 
            
                Array

Event names that can be bound via onEventName constructor options


style: 
            
                string

CSS injected once per component via adoptedStyleSheets


watch: 
            
                Array

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

Instance Methods


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


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


connected()

Called when element is connected to the DOM


disconnected()

Called when element is disconnected from the DOM


initialize()

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


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


                        
                            KompElement

this


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


trigger(eventName, args)

Trigger an event on this element

Parameters

eventName :


            
                string

event name to trigger

args :

additional arguments

Events


afterConnect

Fired after the element is connected to the DOM and initialized


afterDisconnect

Fired after the element is disconnected from the DOM


afterRemove

Fired after the element is removed


beforeConnect

Fired before the element is connected to the DOM


beforeDisconnect

Fired before the element is disconnected from the DOM


beforeRemove

Fired before the element is removed


hidden

Fired when the floater is hidden


shown

Fired when the floater is shown

Notes

Transition Animation

The floater will follow the transition effects set by CSS, and adds classes -out, -out-start, -in and -in-start when hiding and showing. Additionally, the floater adds classes for placement -left, -right, -top, -bottom.