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

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

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)

scope :


            
                string

optional

showing a floater will hide all other floaters of same scope

content :


            
                string
                |
            
                HTMLElement
                |
            
                Array
                |
            
                Object

optional

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

Properties

showing :


            
                boolean

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

Static Properties


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


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


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.


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


anchorChanged()

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


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.


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(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


                        
                            KompElement

this


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


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


trigger(eventName, args)

Trigger an event on this element

Parameters

eventName :


            
                string

event name to trigger

args :

additional arguments

Events


connect

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


connected

Fired after the element is connected to the DOM and initialized


disconnect

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


disconnected

Fired after the element is disconnected from the DOM


hidden

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


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.


remove

Fired before the element is removed (cancellable)


removed

Fired after the element is removed


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.


shown

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

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.