Merge branch 'v2-dev' of https://github.com/materializecss/materialize into v2-dev

Author: wuda-io

src/datepicker.ts

@@ -134,7 +134,7 @@ export interface DatepickerOptions extends BaseOptions {
    * @default null
    */
   onDraw: (() => void) | null;
-  
+
   /** Field used for internal calculations DO NOT CHANGE IT */
   minYear?: any;
   /** Field used for internal calculations DO NOT CHANGE IT */
@@ -261,7 +261,7 @@ export class Datepicker extends Component<DatepickerOptions> {
   constructor(el: HTMLInputElement, options: Partial<DatepickerOptions>) {
     super(el, options, Datepicker);
     (this.el as any).M_Datepicker = this;
-    
+
     this.options = {
       ...Datepicker.defaults,
       ...options
@@ -847,8 +847,8 @@ export class Datepicker extends Component<DatepickerOptions> {
     });
 
     // Add change handlers for select
-    yearSelect.addEventListener('change', () => this._handleYearChange);
-    monthSelect.addEventListener('change', () => this._handleMonthChange);
+    yearSelect.addEventListener('change', this._handleYearChange);
+    monthSelect.addEventListener('change', this._handleMonthChange);
 
     if (typeof this.options.onDraw === 'function') {
       this.options.onDraw.call(this);

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.
@@ -15,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 ""
@@ -45,7 +52,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 +67,7 @@ const _defaults: TooltipOptions = {
   margin: 5,
   inDuration: 250,
   outDuration: 200,
-  position: 'bottom',
+  position: 'bottom' as TooltipPosition,
   transitionMovement: 10,
   opacity: 1
 };
@@ -90,6 +97,7 @@ export class Tooltip extends Component<TooltipOptions> {
 
     this.options = {
       ...Tooltip.defaults,
+      ...this._getAttributeOptions(),
       ...options
     };
 
@@ -139,15 +147,22 @@ 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);
     document.body.appendChild(this.tooltipEl);
   }
 
   _setTooltipContent(tooltipContentEl: HTMLElement) {
-    tooltipContentEl.innerText = this.options.text;
+    if (this.options.tooltipId) 
+      return;
+    tooltipContentEl.innerText = this.options.text;        
   }
 
   _updateTooltipContent() {
@@ -331,16 +346,21 @@ 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 tooltipId = this.el.getAttribute('data-tooltip-id');
     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;
+    }
+    if (tooltipId) {
+      attributeOptions.tooltipId = tooltipId;
     }
+
     return attributeOptions;
   }
 }