javascript - 可以更改我的工具提示插件以接受 "click"选项而不会太麻烦吗？

Question

我有一个为显示/隐藏工具提示而编写的插件。它工作到我很高兴在生产工作中使用它的程度，在这种情况下，我只需要它在悬停时显示/隐藏工具提示。不过，我现在想更改它以在点击时也显示/隐藏。

我可以让它工作到一定程度，但取决于我的尝试，它要么不执行以下操作之一:当我从一个工具提示激活元素单击到另一个激活元素时，上一个工具提示不会隐藏 - 或 -当我从一个元素单击到另一个元素时，上一个工具提示会关闭，但下一个工具提示也不会立即打开。

我已经在 if 语句中尝试了 e.target !== e.currentTarget 和其他一些不太奏效的方法。我的怀疑是，如果没有几个简单的条件，目前的插件将不会轻易扩展，但如果有人可以看一下，如果可能的话让我知道，如果可以的话，希望能给我一些指导或建议可能会对其进行修改，我们将不胜感激。

如果有人想知道我为什么要重新发明轮子(当那里有这么多工具提示插件时):这主要是一个学习练习。我很想在编写可重用代码方面做得更好。我还想要一个可行的工具提示插件，它可以满足我在非常轻量级和框架独立方面的需求，但在我的搜索中我找不到。

下面是目前的代码，处于前面提到的两种状态之一:

(window => {
    let template = document.createElement('div'),
        pos = {x: 0, y: 0},
        targetPos,
        tip,
        tipWidth,
        tipHeight,
        innerOffsetX,
        delay;

    template.inner = document.createElement('div');
    template.inner.setAttribute('class', 'tooltip-inner');
    template.appendChild(template.inner);

    /**
     * @param {string|HTMLElement} container Either a selector string or the element.
     * @param {Object=} config Optional argument for overriding the default configuration.
     */
    class Tooltip {
        constructor(container, config) {
            this.offsetX = 0;
            this.offsetY = 0;
            this.position = 'top';
            this.margin = 6;
            this.offsetBubble = 0;
            this.delayShow = this.delayHide = 0;
            this.clickToShow = false;
            this.tooltipInClass = 'tooltip-in';
            this.tooltip = null;
            this.toggle = true;

            if (typeof container === 'string') {
                this.container = document.querySelector(container);
            } else {
                this.container = container;
            }

            if (config) {
                for (let p in config) {
                    if (typeof config[p] === 'object') {
                        this.delayShow = config.delay.show;
                        this.delayHide = config.delay.hide;
                    } else {
                        this[p] = config[p];
                    }
                }
            }

            template.setAttribute('class', 'tooltip ' + this.position);
        }

        show() {
            return e => {
                if (e.target.hasAttribute('data-tooltip')) {

                    if (this.toggle === true) {

                        targetPos = e.target.getBoundingClientRect();

                        pos.x = targetPos.left + e.target.offsetWidth / 2 + this.offsetX;
                        pos.y = targetPos[this.position] + this.offsetY + document.body.scrollTop;

                        template.inner.innerText = e.target.getAttribute('data-tooltip');

                        this.tooltip = document.body.appendChild(template.cloneNode(true));

                        tip = this.tooltip;

                        tipWidth = tip.clientWidth;
                        tipHeight = tip.clientHeight;

                        pos.x -= tipWidth / 2;
                        pos.y -= this.position === 'bottom' ? -8 : tipHeight;

                        // Nudge tooltip content into the window area if needed
                        if (pos.x + tipWidth > tip.offsetParent.clientWidth) {
                            innerOffsetX = pos.x + tipWidth - tip.offsetParent.clientWidth + 6;
                            tip.firstChild.setAttribute('style', `left:-${innerOffsetX}px`);
                        } else if (pos.x < 0) {
                            innerOffsetX = -pos.x + 6;
                            tip.firstChild.setAttribute('style', `left:${innerOffsetX}px`);
                        }

                        // Reposition tooltip below/above target and flip arrow if needed
                        if (pos.y < 0 && this.position !== 'bottom') {
                            pos.y += tipHeight * 2;
                            tip.classList.remove(this.position);
                            tip.classList.add('bottom');
                        } else if (pos.y + tipHeight > tip.offsetParent.scrollHeight && self.position !== 'top') {
                            tip.classList.remove(this.position);
                            tip.classList.add('top');
                        }

                        tip.setAttribute('style', `left:${Math.floor(pos.x)}px;top:${Math.floor(pos.y)}px`);

                        if (this.delayShow !== 0) {

                            // Don't delay showing the tooltip if entering an adjacent item with a "tooltip" data attribute.
                            if (e.relatedTarget.hasAttribute('data-tooltip')) {
                                delay = 0;
                            } else {
                                delay = this.delayShow;
                            }

                            if (typeof this.timeoutid === 'number') {
                                clearTimeout(this.timeoutid);
                                delete this.timeoutid;
                            }

                            this.timeoutid = setTimeout(function () {
                                tip.classList.add(this.tooltipInClass);
                                this.toggle = false;
                            }, delay);

                        } else {
                            tip.classList.add(this.tooltipInClass);
                            this.toggle = false;
                        }

                    } else {
                        this.hide('hide');
                        this.toggle = true;
                    }
                }
            };
        }

        hide(e) {
            if (e.target && e.target.hasAttribute('data-tooltip') || typeof e === 'string') {
                document.body.lastChild.classList.remove(this.tooltipInClass);
                document.body.removeChild(document.body.lastChild);
            }
        }

        init() {
            if (!this.clickToShow) {
                this.container.addEventListener('mouseover', this.show());
                this.container.addEventListener('mouseout', this.hide);
            } else {
                this.container.addEventListener('click', this.show());
            } 
        }
    }

    window.Tooltip = window.Tooltip || Tooltip;

})(window);

// Usage examples
const elem = document.querySelector('.container'),
    tooltip = new Tooltip(elem, {
        offsetX: -2,
        delay: {show: 0, hide: 0},
        clickToShow: true
    }).init();

还有一个 jsfiddle: http://jsfiddle.net/damo_s/et9hLnkt/

再次强调，我们将不胜感激。

Answer 1

我对你的插件做了一点改动，我添加了两件事来处理这个问题:

如果某些工具提示已打开，我添加此 if 以控制您单击的链接是否是同一目标:

if (document.getElementsByClassName("tooltip-in")[0] &&
  e.target !== document.getElementsByClassName("current-target-tooltip")[0]) {
  this.hide('hide');
  this.toggle = true;
  document.getElementsByClassName("current-target-tooltip")[0].classList.remove("current-target-tooltip");
}

然后我只是在 if/else 中的当前目标上添加了添加/删除类:

    if (this.toggle === true) {
      e.target.classList.add('current-target-tooltip');
      ...
    } else {
      e.target.classList.remove('current-target-tooltip');
      this.hide('hide');
      this.toggle = true;
   }

这是您更新的 fiddle :http://jsfiddle.net/et9hLnkt/18/