Initial version

tp-tooltip-wrapper.js

@@ -0,0 +1,74 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import { LitElement, html, css } from 'lit';
+import { Tooltip } from './tp-tooltip-mixin.js';
+
+/**
+# tp-tooltip-wrapper
+
+This element can be used to add a tooltip to elements that don't implement the tooltip mixin.
+It is a simple wrapper. It can be shown conditionally based on the value of `disabled`.
+For this you have to use the `text` property instead of the inherited `tooltip` property.
+
+## Example
+```html
+<tp-tooltip-wrapper tooltip="Text of the tooltip">
+  <div>Content with a tooltip</div>
+</tp-tooltip-wrapper>
+```
+
+## Styling
+Name | Type | Default | Description
+---|---|---
+--tp-tooltip-wrapper | mixin || Styling on :host.
+
+*/
+class TpTooltipWrapper extends Tooltip(LitElement) {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  static get properties() {
+    return {
+      text: { type: String },
+      disabled: { type: Boolean }
+    };
+  }
+
+  constructor() {
+    super();
+    this.disabled = false;
+  }
+
+  shouldUpdate(changes) {
+    if (changes.has('text') || changes.has('disabled')) {
+      this._setTooltipText(this.text, this.disabled);
+    }
+    return true;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._hideTooltip();
+  }
+
+  _setTooltipText(text, disabled) {
+    this.tooltip = disabled ? '' : text;
+  }
+}
+
+window.customElements.define('tp-tooltip-wrapper', TpTooltipWrapper);