js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix tooltip

Browse Source
This commit is contained in:
Cory LaViska
2020-06-30 07:49:28 -04:00
parent 8c01ef4c4f
commit 6e6bf7fbe2
3 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/range.md
View File

@@ -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

16
src/components.d.ts vendored
View File

@@ -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.
*/

10
src/components/range/range.tsx
View File

@@ -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>