From a5da4bf3adaacc50220a754194cc9122ad2545ae Mon Sep 17 00:00:00 2001
From: George Ashworth <george.ashworth@chargehive.com>
Date: Wed, 19 Nov 2025 15:47:35 +0000
Subject: [PATCH] DEV-1846 Summary Bar Tags Only Updating on Refresh | include
 tooltip option in chip component

---
 docs/pages/components/chip.md         |  6 +-
 src/components/chip/chip.component.ts | 89 +++++++++++++++------------
 2 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/docs/pages/components/chip.md b/docs/pages/components/chip.md
index 11cfebee2..f04eff7bb 100644
--- a/docs/pages/components/chip.md
+++ b/docs/pages/components/chip.md
@@ -50,9 +50,11 @@ layout: component
 
 ## Examples
 
-### First Example
+### Tooltip Example
 
-TODO
+```html:preview
+<zn-chip icon="home" tooltip="Here is a tooltip">Tooltip Test</zn-chip>
+```
 
 ### Second Example
 
diff --git a/src/components/chip/chip.component.ts b/src/components/chip/chip.component.ts
index acb77e5fc..bf9e91d69 100644
--- a/src/components/chip/chip.component.ts
+++ b/src/components/chip/chip.component.ts
@@ -24,51 +24,58 @@ import styles from './chip.scss';
  * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnChip extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+    static styles: CSSResultGroup = unsafeCSS(styles);
 
-  @property() icon: string = '';
+    @property() icon: string = '';
+    @property() tooltip: string = '';
 
-  @property() type: 'info' | 'success' | 'warning' | 'error' | 'primary' |
-    'transparent' | 'custom' | 'neutral' = 'neutral';
+    @property() type: 'info' | 'success' | 'warning' | 'error' | 'primary' |
+        'transparent' | 'custom' | 'neutral' = 'neutral';
 
-  @property() size: 'small' | 'medium' | 'large'; // Defaults to base chip styling
+    @property() size: 'small' | 'medium' | 'large'; // Defaults to base chip styling
 
-  @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
-  @property({attribute: 'flush-x', type: Boolean, reflect: true}) flushX: boolean = false;
-  @property({attribute: 'flush-y', type: Boolean, reflect: true}) flushY: boolean = false;
+    @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
+    @property({attribute: 'flush-x', type: Boolean, reflect: true}) flushX: boolean = false;
+    @property({attribute: 'flush-y', type: Boolean, reflect: true}) flushY: boolean = false;
 
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'action');
+    private readonly hasSlotController = new HasSlotController(this, '[default]', 'action');
 
-  render() {
-    const hasContent = this.hasSlotController.test('[default]')
-    return html`
-      <div class="${classMap({
-        'chip': true,
-        'chip--with-content': hasContent,
-        'chip--no-content': !hasContent,
-        'chip--with-icon': this.icon,
-        'chip--flush': this.flush,
-        'chip--flush-x': this.flushX,
-        'chip--flush-y': this.flushY,
-        'chip--info': this.type === 'info',
-        'chip--success': this.type === 'success',
-        'chip--warning': this.type === 'warning',
-        'chip--error': this.type === 'error',
-        'chip--primary': this.type === 'primary',
-        'chip--transparent': this.type === 'transparent',
-        'chip--custom': this.type === 'custom',
-        'chip--neutral': this.type === 'neutral',
-        'chip--small': this.size === 'small',
-        'chip--medium': this.size === 'medium',
-        'chip--large': this.size === 'large',
-      })}">
-        ${this.icon ? html`
-          <zn-icon src="${this.icon}" size="18"></zn-icon>` : ''}
-        ${hasContent ? html`
-          <slot></slot>` : ''}
-        ${this.hasSlotController.test('action') ? html`
-          <slot name="action" class="chip__action"></slot>` : ''}
-      </div>
-    `;
-  }
+    render() {
+        return html`
+          ${this.tooltip ? html`
+            <zn-tooltip content="${this.tooltip}">${this.getContent()}</zn-tooltip>` : html`${this.getContent()}`}
+        `;
+    }
+
+    getContent() {
+        const hasContent = this.hasSlotController.test('[default]');
+        return html`
+          <div class="${classMap({
+            'chip': true,
+            'chip--with-content': hasContent,
+            'chip--no-content': !hasContent,
+            'chip--with-icon': this.icon,
+            'chip--flush': this.flush,
+            'chip--flush-x': this.flushX,
+            'chip--flush-y': this.flushY,
+            'chip--info': this.type === 'info',
+            'chip--success': this.type === 'success',
+            'chip--warning': this.type === 'warning',
+            'chip--error': this.type === 'error',
+            'chip--primary': this.type === 'primary',
+            'chip--transparent': this.type === 'transparent',
+            'chip--custom': this.type === 'custom',
+            'chip--neutral': this.type === 'neutral',
+            'chip--small': this.size === 'small',
+            'chip--medium': this.size === 'medium',
+            'chip--large': this.size === 'large',
+          })}">
+            ${this.icon ? html`
+              <zn-icon src="${this.icon}" size="18"></zn-icon>` : ''}
+            ${hasContent ? html`
+              <slot></slot>` : ''}
+            ${this.hasSlotController.test('action') ? html`
+              <slot name="action" class="chip__action"></slot>` : ''}
+          </div>`
+    }
 }