Initial version

tp-tooltip-mixin.js

@@ -0,0 +1,100 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import './tp-tooltip.js';
+
+/**
+ * Elements implementing this mixin are able to show tooltip on mouse over.
+ *
+ * ## Example
+ * ```html
+ * <x-foo tooltip="Show this text in the tooltip"></x-foo>
+ * ```
+ *
+ * @polymer
+* @mixinFunction
+ */
+export const Tooltip = function(superClass) {
+  return class extends superClass {
+    static get properties() {
+      return {
+
+        /**
+         * Text to show in the tooltip.
+         */
+        tooltip: { type: String },
+
+        /**
+         * Vertical align of the tooltip.
+         * Supported are `bottom` and `top`.
+         */
+        tooltipValign: { type: String }
+      };
+    }
+
+    constructor() {
+      super();
+      this.tooltipValign = 'bottom';
+      this._showTooltip = this._showTooltip.bind(this);
+      this._hideTooltip = this._hideTooltip.bind(this);
+    }
+
+    set tooltip(val) {
+      const oldTooltip = this.tooltip;
+      this._tooltip = val;
+      this._tooltipChanged(this.tooltip, oldTooltip);
+    }
+
+    get tooltip() {
+      return this._tooltip;
+    }
+
+    _tooltipChanged(newTooltip, oldTooltip) {
+      if (oldTooltip) {
+        this.removeEventListener('mouseenter', this._showTooltip);
+        this.removeEventListener('focus', this._showTooltip);
+      }
+
+      if (newTooltip && newTooltip !== '') {
+        this.addEventListener('mouseenter', this._showTooltip);
+        this.addEventListener('focus', this._showTooltip);
+      }
+    }
+
+    _showTooltip() {
+      if (this._tooltipInstance || !this.tooltip || this.tooltip === '') {
+        return;
+      }
+      const tooltip = document.createElement('tp-tooltip');
+      tooltip.innerHTML = this.tooltip;
+      tooltip.valign = this.tooltipValign;
+      tooltip.target = this;
+      this._tooltipInstance = tooltip;
+
+      this.addEventListener('mouseleave', this._hideTooltip);
+      this.addEventListener('blur', this._hideTooltip);
+      this.addEventListener('click', this._hideTooltip);
+
+      document.body.appendChild(this._tooltipInstance);
+      this._tooltipInstance.show();
+    }
+
+    _hideTooltip() {
+      if (!this._tooltipInstance) {
+        return;
+      }
+      this._tooltipInstance.hide(function() {
+        if (this._tooltipInstance) {
+          document.body.removeChild(this._tooltipInstance);
+          this.removeEventListener('mouseleave', this._hideTooltip);
+          this.removeEventListener('blur', this._hideTooltip);
+          this.removeEventListener('click', this._hideTooltip);
+          this._tooltipInstance = null;
+        }
+      }.bind(this));
+    }
+  };
+}