Tooltip (extends Floater)

Assign a message to show on hover.

Example

Syntax

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

HTML

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

Options

	types	description	required	default	type
`content`	String, HTMLElement, Array, Object	content for the floater, uses Dolla's `content`
`anchor`	String, HTMLElement	element to append floater to. If `String`, then used as selector for `this.closest(selector)`	true	null/anchor.parentElement
`placement`	String	how the floater is anchored options like "top", "top-start", "top-end", "left", "left-start"...		bottom
`strategy`	String	how the floater is positioned in the document. "absolute" or "fixed"		absolute
`flip`	Boolean, Object	See https://floating-ui.com/docs/flip, defaults to false in favor of autoPlacement		false
`offset`	Boolean, Object	See https://floating-ui.com/docs/offset		false
`shift`	Boolean, Object	See https://floating-ui.com/docs/shift		true
`arrow`	Boolean, Number	True to show default size, or number in pixels		false
`size`	Boolean, Object	See https://floating-ui.com/docs/size		false
`autoPlacement`	Boolean, Object	See https://floating-ui.com/docs/autoPlacement		true
`inline`	Boolean, Object	See https://floating-ui.com/docs/inline		false
`autoUpdate`	Boolean, Object	See https://floating-ui.com/docs/autoUpdate#options		true
`removeOnBlur`	Boolean	hide floater on outside click/focus or escape key		false
`timeout`	Number	ms to wait until hiding after mouseout		300
`onHide`	Function	called after hidden
`onShow`	Function	called before showing
`scope`		showing a tooltip will hide all other tooltips of same scope		general	String
`enabled`		set starting state		true	boolean

SOURCE CODE

import { createElement, remove } from 'dolla';
import Floater from './floater.js'; 

class Tooltip extends Floater {
    static tagName = 'komp-tooltip'
    static watch = ['anchor']
    
    static assignableAttributes = {
        autoPlacement: false,
        flip: true,
        shift: true,
        strategy: 'absolute',
        placement: 'top',
        arrow: true,
        timeout: 300,
        scope: 'general'
    }
    
    constructor (options, ...args) {
        super(options, ...args)
        this.anchorChanged(this.anchor, this.anchor)
        if (options === undefined) {
            this.needsFirstRemoval = true
        }
        if (options.enabled != false) {
            this.enable()
        }
    }
    
    enable () {
        this.anchor.addEventListener('mouseenter', this.show)
        this.anchor.addEventListener('mouseleave', this.hide)
        this.addEventListener('mouseenter', this.show)
        this.addEventListener('mouseleave', this.hide)
    }
    
    disable () {
        this.anchor.removeEventListener('mouseenter', this.show)
        this.anchor.removeEventListener('mouseleave', this.hide)
        this.removeEventListener('mouseenter', this.show)
        this.removeEventListener('mouseleave', this.hide)
    }
    
    connected () {
        super.connected();
        if (this.getRootNode() == this.anchor.getRootNode()) {
            if (this.showing == false) {
                remove(this);
                return false
            }
        }
    }
    
    anchorChanged (was, now) {
        if (was && was.removeEventListener) {
            was.removeEventListener('mouseenter', this.show)
            was.removeEventListener('mouseleave', this.hide)
        }
        if (now && now.addEventListener) {
            now.addEventListener('mouseenter', this.show)
            now.addEventListener('mouseleave', this.hide)
        }
    }
    
    async remove () {
        await super.remove()
        if (window.activeTooltips[this.scope] == this) {
            delete window.activeTooltips[this.scope]
        }
    }

}
window.customElements.define('komp-tooltip', Tooltip);