export class ctlTooltip extends my.core.Control {
        ctlType: string = "ctlTooltip";
        element: HTMLDivElement;
        readOnly: boolean = false;
        reset: Function;
        disabled: boolean = false;
        value: string;
        isOpen: boolean = false;
        cfg: ITooltip;

        objectDefaults: ITooltip = {
            target: document.getElementsByTagName('body')[0],
            title: 'Tooltip',
            position: 'top',
            contentTemplate: '<div class="ctltooltip-title"></div><div class="ctltooltip-content"></div>',
            event: 'hover'
        }

        TOOLTIP_CLASS: string = 'ctlTooltip';
        TOOLTIP_VISIBLE_CLASS: string = 'tooltipOpen';

        constructor(cfg: ITooltip) {
            super('div');

            this.config = cfg;
            this.attachEventListeners();
        }

        set config(val: ITooltip) {
            if (val) {
                this.cfg = val;
            }
        }

        get config(): ITooltip {
            return this.cfg;
        }

        getPosition = (el: object): object => {
            /* 0 for X and 1 for Y */
            let pos = this.extractPositions(),
                w = this.extractWidth();

            switch (this.cfg.position) {
                case "top":
                    return {
                        top: pos[1] - 50,
                        left: pos[0],
                        w: w[0]
                    }
                case "right":
                    return {
                        top: el['offsetTop'],
                        left: el['offsetLeft'] + el['offsetWidth']
                    }
                case "bottom":
                    return {
                        top: el['offsetTop'] + el['offsetHeight'],
                        left: el['offsetLeft']
                    }
                case "left":
                    return {
                        top: el['offsetTop'],
                        left: el['offsetLeft'] - el['offsetWidth']
                    }
            }
        }

        extractPositions = () => {
            return this.cfg.target['element']['style']['transform'].match(/(-?[0-9.]+)/g);
        }

        extractWidth = () => {
            return this.cfg.target['element']['style']['width'].match('[0-9px]+');
        }

        attachEventListeners = (): void => {
            let self = this,
                el = this.cfg.target;

            switch (this.cfg.event) {
                case "hover":
                    el['element'].addEventListener('mouseenter', self.render);
                    /* add mouseleave to destroy the tooltip */
                    el['element'].addEventListener('mouseleave', self.destroy);
                    break;
                case "click":
                    el['element'].addEventListener('click', self.render);
                    break;
            }
        }

        createElement = (): HTMLElement => {
            return document.createElement('div');
        }

        render = (): void => {
            if (!this.isOpen) {
                this.show();
                this.isOpen = true;
            } else {
                this.destroy();
            }
        }

        show = (): void => {
            let container = this.cfg.target['element'].parentNode,
                div = this.createElement(),
                pos = this.getPosition(this.cfg.target['element']);

            div.innerHTML = this.cfg.contentTemplate;
            div.style.transform = 'translate(' + pos['left'] + 'px, ' + pos['top'] + 'px)';
            div.style.width = pos['w'];

            div.classList.add(this.TOOLTIP_CLASS, this.TOOLTIP_VISIBLE_CLASS);
            container.appendChild(div);
        }

        destroy = (): void => {
            if (this.isOpen) {
                let parent = this.cfg.target['element'].parentElement;
                if (parent.querySelector('.ctlTooltip') !== null) {
                    parent.removeChild(document.getElementsByClassName(this.TOOLTIP_CLASS)[0]);
                }
                this.isOpen = false;
            }
        }
    }

.tooltipOpen {
  position: relative;
  border: 1px solid black;
  background-color: white;
  border-radius: 3px;
  text-align: center;
}

.tooltipOpen::before {
  position: relative;
  content: "";
  display: block;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  width: 15px;
  height: 15px;
  top: 20px;
  left: 45px;
  transform: rotate(45deg);
  z-index: -1;
}