From 6e6bf7fbe2cd0f4e7c299790f9a15a692c5b4e9f Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 30 Jun 2020 07:49:28 -0400
Subject: [PATCH] Fix tooltip

---
 docs/components/range.md       |  2 +-
 src/components.d.ts            | 16 ++++++++--------
 src/components/range/range.tsx | 10 +++++-----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/components/range.md b/docs/components/range.md
index 75df8189b..f1f536c72 100644
--- a/docs/components/range.md
+++ b/docs/components/range.md
@@ -28,7 +28,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 ### Without Tooltip
 
 ```html preview
-<sl-range min="0" max="100" step="1" tooltip="off"></sl-range>
+<sl-range min="0" max="100" step="1" tooltip="none"></sl-range>
 ```
 
 ### Disabled
diff --git a/src/components.d.ts b/src/components.d.ts
index ba778d88f..728773cbf 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -520,14 +520,14 @@ export namespace Components {
           * The input's step attribute.
          */
         "step": number;
+        /**
+          * The preferred placedment of the tooltip.
+         */
+        "tooltip": 'top' | 'bottom' | 'none';
         /**
           * A function used to format the tooltip's value.
          */
         "tooltipFormatter": (value: number) => string;
-        /**
-          * The preferred placedment of the tooltip.
-         */
-        "tooltipPlacement": 'top' | 'bottom' | 'hidden';
         /**
           * The input's value attribute.
          */
@@ -1585,14 +1585,14 @@ declare namespace LocalJSX {
           * The input's step attribute.
          */
         "step"?: number;
+        /**
+          * The preferred placedment of the tooltip.
+         */
+        "tooltip"?: 'top' | 'bottom' | 'none';
         /**
           * A function used to format the tooltip's value.
          */
         "tooltipFormatter"?: (value: number) => string;
-        /**
-          * The preferred placedment of the tooltip.
-         */
-        "tooltipPlacement"?: 'top' | 'bottom' | 'hidden';
         /**
           * The input's value attribute.
          */
diff --git a/src/components/range/range.tsx b/src/components/range/range.tsx
index d0778b7c5..944d93bc8 100644
--- a/src/components/range/range.tsx
+++ b/src/components/range/range.tsx
@@ -43,7 +43,7 @@ export class Range {
   @Prop() step = 1;
 
   /** The preferred placedment of the tooltip. */
-  @Prop() tooltipPlacement: 'top' | 'bottom' | 'hidden' = 'top';
+  @Prop() tooltip: 'top' | 'bottom' | 'none' = 'none';
 
   /** A function used to format the tooltip's value. */
   @Prop() tooltipFormatter = (value: number) => value.toString();
@@ -100,7 +100,7 @@ export class Range {
   }
 
   syncTooltip() {
-    if (this.tooltipPlacement !== 'hidden') {
+    if (this.tooltip !== 'none') {
       const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
       const inputWidth = this.input.offsetWidth;
       const tooltipWidth = this.output.offsetWidth;
@@ -120,8 +120,8 @@ export class Range {
           // States
           'range--disabled': this.disabled,
           'range--focused': this.hasFocus,
-          'range--tooltip-top': this.tooltipPlacement === 'top',
-          'range--tooltip-bottom': this.tooltipPlacement === 'bottom'
+          'range--tooltip-top': this.tooltip === 'top',
+          'range--tooltip-bottom': this.tooltip === 'bottom'
         }}
       >
         <input
@@ -138,7 +138,7 @@ export class Range {
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
         />
-        {this.tooltipPlacement !== 'hidden' && (
+        {this.tooltip !== 'none' && (
           <output ref={el => (this.output = el)} class="range__tooltip">
             {this.tooltipFormatter(this.value)}
           </output>