From 991331297186eba3f18a51280686d3b2e70377ee Mon Sep 17 00:00:00 2001
From: Daniel Calbet <danicalbet@gmail.com>
Date: Tue, 24 Oct 2023 04:28:57 +0200
Subject: [PATCH 1/3] chore: tooltip positions as type, _getAttributeOptions
 returns TooltipOptions partial

---
 src/tooltip.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/tooltip.ts b/src/tooltip.ts
index 41893f69ac..9f814369e6 100644
--- a/src/tooltip.ts
+++ b/src/tooltip.ts
@@ -4,6 +4,8 @@ import { Utils } from "./utils";
 import { Bounding } from "./bounding";
 import { Component, BaseOptions, InitElements, MElement } from "./component";
 
+export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+
 export interface TooltipOptions extends BaseOptions {
   /**
    * Delay time before tooltip disappears.
@@ -45,7 +47,7 @@ export interface TooltipOptions extends BaseOptions {
    * Set the direction of the tooltip.
    * @default 'bottom'
    */
-  position: 'top' | 'right' | 'bottom' | 'left';
+  position: TooltipPosition;
   /**
    * Amount in px that the tooltip moves during its transition.
    * @default 10
@@ -60,7 +62,7 @@ const _defaults: TooltipOptions = {
   margin: 5,
   inDuration: 250,
   outDuration: 200,
-  position: 'bottom',
+  position: 'bottom' as TooltipPosition,
   transitionMovement: 10,
   opacity: 1
 };
@@ -331,15 +333,15 @@ export class Tooltip extends Component<TooltipOptions> {
     this.close();
   }
 
-  _getAttributeOptions() {
-    const attributeOptions = {};
+  _getAttributeOptions(): Partial<TooltipOptions> {    
+    let attributeOptions: Partial<TooltipOptions> = { };
     const tooltipTextOption = this.el.getAttribute('data-tooltip');
     const positionOption = this.el.getAttribute('data-position');
     if (tooltipTextOption) {
-      (attributeOptions as any).text = tooltipTextOption;
+      attributeOptions.text = tooltipTextOption;
     }
     if (positionOption) {
-      (attributeOptions as any).position = positionOption;
+      attributeOptions.position = positionOption as TooltipPosition;
     }
     return attributeOptions;
   }

From 28f2fdfa69fb98425422250a19350ba317fdc5e4 Mon Sep 17 00:00:00 2001
From: Daniel Calbet <danicalbet@gmail.com>
Date: Tue, 24 Oct 2023 05:01:16 +0200
Subject: [PATCH 2/3] feat(tooltip): property to specify an element as tooltip
 content instead of text

---
 src/tooltip.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/tooltip.ts b/src/tooltip.ts
index 9f814369e6..73589f1784 100644
--- a/src/tooltip.ts
+++ b/src/tooltip.ts
@@ -17,6 +17,11 @@ export interface TooltipOptions extends BaseOptions {
    * @default 0
    */
   enterDelay: number;
+  /**
+   * Element Id for the tooltip.
+   * @default ""
+   */
+  tooltipId?: string;
   /**
    * Text string for the tooltip.
    * @default ""
@@ -92,6 +97,7 @@ export class Tooltip extends Component<TooltipOptions> {
 
     this.options = {
       ...Tooltip.defaults,
+      ...this._getAttributeOptions(),
       ...options
     };
     
@@ -141,7 +147,12 @@ export class Tooltip extends Component<TooltipOptions> {
     this.tooltipEl = document.createElement('div');
     this.tooltipEl.classList.add('material-tooltip');
 
-    const tooltipContentEl = document.createElement('div');
+    const tooltipContentEl = this.options.tooltipId 
+      ? document.getElementById(this.options.tooltipId)
+      : document.createElement('div');
+    this.tooltipEl.append( tooltipContentEl);
+    tooltipContentEl.style.display = ""; 
+    
     tooltipContentEl.classList.add('tooltip-content');
     this._setTooltipContent(tooltipContentEl);
     this.tooltipEl.appendChild(tooltipContentEl);
@@ -149,7 +160,9 @@ export class Tooltip extends Component<TooltipOptions> {
   }
 
   _setTooltipContent(tooltipContentEl: HTMLElement) {
-    tooltipContentEl.innerText = this.options.text;
+    if (this.options.tooltipId) 
+      return;
+    tooltipContentEl.innerText = this.options.text;        
   }
 
   _updateTooltipContent() {
@@ -336,6 +349,7 @@ export class Tooltip extends Component<TooltipOptions> {
   _getAttributeOptions(): Partial<TooltipOptions> {    
     let attributeOptions: Partial<TooltipOptions> = { };
     const tooltipTextOption = this.el.getAttribute('data-tooltip');
+    const tooltipId = this.el.getAttribute('data-tooltip-id');
     const positionOption = this.el.getAttribute('data-position');
     if (tooltipTextOption) {
       attributeOptions.text = tooltipTextOption;
@@ -343,6 +357,10 @@ export class Tooltip extends Component<TooltipOptions> {
     if (positionOption) {
       attributeOptions.position = positionOption as TooltipPosition;
     }
+    if (tooltipId) {
+      attributeOptions.tooltipId = tooltipId;
+    }
+
     return attributeOptions;
   }
 }

From 876a2e41ba10ac4a724914be69787c31edd5a417 Mon Sep 17 00:00:00 2001
From: Daniel Calbet <danicalbet@gmail.com>
Date: Tue, 24 Oct 2023 05:08:31 +0200
Subject: [PATCH 3/3] chore: tooltip with data-tooltip-id example

---
 pug/contents/tooltips_content.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pug/contents/tooltips_content.html b/pug/contents/tooltips_content.html
index 76ac97226d..0e9eb1f23d 100644
--- a/pug/contents/tooltips_content.html
+++ b/pug/contents/tooltips_content.html
@@ -7,8 +7,10 @@
         <p>Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can
           use a tooltip to give people clarification on its function.</p>
         <div class="row">
-          <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-html="true" data-position="bottom" data-tooltip="I am a tooltip">
-          Bottom</a>
+          <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-html="true" data-position="bottom" data-tooltip-id="tooltip-content"> Bottom</a>
+          <div id="tooltip-content" style="display: none;">            
+              This is a tooltip with a <a href="https://github.com/materializecss">link</a> and a <i class="material-icons icon-demo">insert_chart</i>
+          </div>  
           <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="top" data-tooltip="I am a tooltip"> Top</a>
           <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="left" data-tooltip="I am a tooltip"> Left</a>
           <a href="#!" class="btn tooltipped col s4 offset-s4 l2 offset-l1" data-position="right" data-tooltip="I am a tooltip"> Right</a>