@limetech/lime-elements 33.14.0-next.12 → 33.14.0-next.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/limel-tooltip-content.cjs.entry.js +2 -2
- package/dist/cjs/limel-tooltip.cjs.entry.js +1 -1
- package/dist/collection/components/tooltip/tooltip-content.css +22 -12
- package/dist/collection/components/tooltip/tooltip-content.js +2 -2
- package/dist/collection/components/tooltip/tooltip.css +0 -5
- package/dist/collection/components/tooltip/tooltip.js +31 -5
- package/dist/esm/limel-tooltip-content.entry.js +2 -2
- package/dist/esm/limel-tooltip.entry.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-b0b18dfc.entry.js → p-8a831c42.entry.js} +1 -1
- package/dist/lime-elements/p-f3779c9e.entry.js +1 -0
- package/dist/types/components/tooltip/tooltip.d.ts +31 -5
- package/package.json +1 -1
- package/dist/lime-elements/p-a6a7dd00.entry.js +0 -1
|
@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-153dc912.js');
|
|
6
6
|
|
|
7
|
-
const tooltipContentCss = ".tooltip-content{display:flex;flex-direction:row;
|
|
7
|
+
const tooltipContentCss = ".tooltip-content{animation:display-tooltip 0.2s ease;display:flex;flex-direction:row;border-radius:0.25rem;padding:0.25rem 0.5rem;font-size:0.875rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}.tooltip-content .label{color:rgb(var(--contrast-200))}.tooltip-content .helper-label{color:rgb(var(--contrast-800));padding:0 0 0 1rem}.tooltip-content .helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
|
|
8
8
|
|
|
9
9
|
const TooltipContent = class {
|
|
10
10
|
constructor(hostRef) {
|
|
11
11
|
index.registerInstance(this, hostRef);
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (index.h("div", { class: "tooltip-content" }, index.h("div", { class: "
|
|
14
|
+
return (index.h("div", { class: "tooltip-content" }, index.h("div", { class: "label" }, this.label), index.h("div", { class: "helper-label" }, this.helperLabel)));
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
17
|
TooltipContent.style = tooltipContentCss;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-153dc912.js');
|
|
6
6
|
const randomString = require('./random-string-4c3b7f1c.js');
|
|
7
7
|
|
|
8
|
-
const tooltipCss = ".trigger-anchor{display:inline-block;position:relative}
|
|
8
|
+
const tooltipCss = ".trigger-anchor{display:inline-block;position:relative}";
|
|
9
9
|
|
|
10
10
|
const Tooltip = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -1,21 +1,31 @@
|
|
|
1
1
|
.tooltip-content {
|
|
2
|
+
animation: display-tooltip 0.2s ease;
|
|
2
3
|
display: flex;
|
|
3
4
|
flex-direction: row;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
transition: opacity 150ms ease-out;
|
|
10
|
-
margin-top: 0.3rem;
|
|
11
|
-
background-color: rgb(var(--color-gray-darker));
|
|
5
|
+
border-radius: 0.25rem;
|
|
6
|
+
padding: 0.25rem 0.5rem;
|
|
7
|
+
font-size: 0.875rem;
|
|
8
|
+
background-color: rgb(var(--contrast-1300));
|
|
9
|
+
box-shadow: var(--shadow-depth-16);
|
|
12
10
|
}
|
|
13
|
-
.tooltip-content .
|
|
14
|
-
color: rgb(var(--
|
|
11
|
+
.tooltip-content .label {
|
|
12
|
+
color: rgb(var(--contrast-200));
|
|
15
13
|
}
|
|
16
|
-
.tooltip-content .
|
|
14
|
+
.tooltip-content .helper-label {
|
|
15
|
+
color: rgb(var(--contrast-800));
|
|
17
16
|
padding: 0 0 0 1rem;
|
|
18
17
|
}
|
|
19
|
-
.tooltip-content .
|
|
18
|
+
.tooltip-content .helper-label:empty {
|
|
20
19
|
display: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@keyframes display-tooltip {
|
|
23
|
+
0% {
|
|
24
|
+
opacity: 0;
|
|
25
|
+
transform: translate3d(0, 0, 0) scale(0.94);
|
|
26
|
+
}
|
|
27
|
+
100% {
|
|
28
|
+
opacity: 1;
|
|
29
|
+
transform: translate3d(0, 0, 0) scale(1);
|
|
30
|
+
}
|
|
21
31
|
}
|
|
@@ -7,8 +7,8 @@ import { Component, h, Prop } from '@stencil/core';
|
|
|
7
7
|
export class TooltipContent {
|
|
8
8
|
render() {
|
|
9
9
|
return (h("div", { class: "tooltip-content" },
|
|
10
|
-
h("div", { class: "
|
|
11
|
-
h("div", { class: "
|
|
10
|
+
h("div", { class: "label" }, this.label),
|
|
11
|
+
h("div", { class: "helper-label" }, this.helperLabel)));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "limel-tooltip-content"; }
|
|
14
14
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,17 +1,43 @@
|
|
|
1
1
|
import { Component, h, Prop, Element, State } from '@stencil/core';
|
|
2
2
|
import { createRandomString } from '../../util/random-string';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
* of
|
|
4
|
+
* A tooltip can be used to display a descriptive text for any element.
|
|
5
|
+
* The displayed content must be a brief and supplemental string of text,
|
|
6
|
+
* identifying the element or describing its function for the user,
|
|
7
|
+
* helping them better understand unfamiliar objects that aren't described
|
|
8
|
+
* directly in the UI.
|
|
6
9
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
+
* ## Interaction
|
|
11
|
+
* The tooltip appears after a slight delay, when the element is hovered;
|
|
12
|
+
* and disappears as soon as the cursor leaves the element.
|
|
13
|
+
* Therefore, users cannot interact with the tip, but if the trigger element
|
|
14
|
+
* itself is interactive, it will remain interactible even with a tooltip bound
|
|
15
|
+
* to it.
|
|
16
|
+
*
|
|
17
|
+
* :::note
|
|
18
|
+
* In order to display the tooltip, the tooltip element and its trigger element
|
|
19
|
+
* must be within the same document or document fragment.
|
|
20
|
+
* A good practice is to just place them next to each other like below:
|
|
10
21
|
*
|
|
11
22
|
* ```html
|
|
12
23
|
* <limel-button icon="search" id="tooltip-example" />
|
|
13
24
|
* <limel-tooltip label="Search" elementId="tooltip-example" />
|
|
14
25
|
* ```
|
|
26
|
+
* :::
|
|
27
|
+
*
|
|
28
|
+
* ## Usage
|
|
29
|
+
* - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.
|
|
30
|
+
* Use them only when they add significant value.
|
|
31
|
+
* - A good tip is concise, helpful, and informative.
|
|
32
|
+
* Don't explain the obvious or simply repeat what is already on the screen.
|
|
33
|
+
* When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
|
|
34
|
+
* - If the tip is essential to the primary tasks that the user is performing,
|
|
35
|
+
* such as warnings or important notes, include the information directly in the
|
|
36
|
+
* interface instead.
|
|
37
|
+
* - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
|
|
38
|
+
* use that, not a tooltip.
|
|
39
|
+
* - Make sure to use the tooltip on an element that users naturally and
|
|
40
|
+
* effortlessly recognize can be hovered.
|
|
15
41
|
*
|
|
16
42
|
* @exampleComponent limel-example-tooltip
|
|
17
43
|
* @private
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-dc421a6e.js';
|
|
2
2
|
|
|
3
|
-
const tooltipContentCss = ".tooltip-content{display:flex;flex-direction:row;
|
|
3
|
+
const tooltipContentCss = ".tooltip-content{animation:display-tooltip 0.2s ease;display:flex;flex-direction:row;border-radius:0.25rem;padding:0.25rem 0.5rem;font-size:0.875rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}.tooltip-content .label{color:rgb(var(--contrast-200))}.tooltip-content .helper-label{color:rgb(var(--contrast-800));padding:0 0 0 1rem}.tooltip-content .helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
|
|
4
4
|
|
|
5
5
|
const TooltipContent = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h("div", { class: "tooltip-content" }, h("div", { class: "
|
|
10
|
+
return (h("div", { class: "tooltip-content" }, h("div", { class: "label" }, this.label), h("div", { class: "helper-label" }, this.helperLabel)));
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
TooltipContent.style = tooltipContentCss;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, g as getElement } from './index-dc421a6e.js';
|
|
2
2
|
import { c as createRandomString } from './random-string-2246b81e.js';
|
|
3
3
|
|
|
4
|
-
const tooltipCss = ".trigger-anchor{display:inline-block;position:relative}
|
|
4
|
+
const tooltipCss = ".trigger-anchor{display:inline-block;position:relative}";
|
|
5
5
|
|
|
6
6
|
const Tooltip = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-fabb836f.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((e=>l([["p-7dd9c41d",[[1,"limel-picker",{disabled:[4],readonly:[516],label:[1],searchLabel:[1,"search-label"],leadingIcon:[1,"leading-icon"],emptyResultMessage:[1,"empty-result-message"],required:[4],value:[16],searcher:[16],multiple:[4],delimiter:[513],displayFullList:[4,"display-full-list"],actions:[16],actionPosition:[1,"action-position"],actionScrollBehavior:[1,"action-scroll-behavior"],items:[32],textValue:[32],loading:[32],chips:[32]}]]],["p-7be3a593",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[513],format:[513],language:[513],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-bd805195",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-24c128ec",[[1,"limel-select",{disabled:[516],readonly:[516],invalid:[516],required:[516],label:[513],helperText:[513,"helper-text"],value:[16],options:[16],multiple:[4],menuOpen:[32]}]]],["p-bde1749a",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-90b2c0a2",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-63e4f918",[[1,"limel-menu",{label:[513],items:[16],disabled:[516],openDirection:[513,"open-direction"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"],fixed:[4]}]]],["p-1a3a9bfd",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516]}]]],["p-3df01502",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[1],actions:[16]}]]],["p-c636bfcf",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-dc5b3f45",[[1,"limel-popover",{open:[4]}]]],["p-b88e7350",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-191f05bc",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-67c48f98",[[1,"limel-table",{data:[16],columns:[16],mode:[1],pageSize:[2,"page-size"],totalRows:[2,"total-rows"],sorting:[16],activeRow:[1040],movableColumns:[4,"movable-columns"],loading:[4],page:[2],emptyMessage:[1,"empty-message"]}]]],["p-79541c2b",[[1,"limel-checkbox",{disabled:[516],readonly:[516],label:[513],checked:[516],required:[516],modified:[32]}]]],["p-231f62ba",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}]]],["p-467c87f6",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-7c6f6b80",[[1,"limel-config",{config:[16]}]]],["p-f94cbe50",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-2476f7bb",[[1,"limel-form",{schema:[16],value:[16],propsFactory:[16]}]]],["p-6d9f679d",[[1,"limel-grid"]]],["p-3a21fa33",[[1,"limel-linear-progress",{value:[2],indeterminate:[4]}]]],["p-af7c5b11",[[1,"limel-slider",{disabled:[516],readonly:[516],factor:[514],label:[513],helperText:[513,"helper-text"],unit:[513],value:[514],valuemax:[514],valuemin:[514],step:[514],percentageClass:[32]}]]],["p-16c336e8",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-c53695a3",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],value:[516],fieldId:[32]}]]],["p-30c4b32a",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516],relayout:[64]}]]],["p-eb81fc35",[[1,"limel-badge",{label:[514]}]]],["p-61ecc7f1",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-fabb836f.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((e=>l([["p-7dd9c41d",[[1,"limel-picker",{disabled:[4],readonly:[516],label:[1],searchLabel:[1,"search-label"],leadingIcon:[1,"leading-icon"],emptyResultMessage:[1,"empty-result-message"],required:[4],value:[16],searcher:[16],multiple:[4],delimiter:[513],displayFullList:[4,"display-full-list"],actions:[16],actionPosition:[1,"action-position"],actionScrollBehavior:[1,"action-scroll-behavior"],items:[32],textValue:[32],loading:[32],chips:[32]}]]],["p-7be3a593",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[513],format:[513],language:[513],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-bd805195",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-24c128ec",[[1,"limel-select",{disabled:[516],readonly:[516],invalid:[516],required:[516],label:[513],helperText:[513,"helper-text"],value:[16],options:[16],multiple:[4],menuOpen:[32]}]]],["p-bde1749a",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-90b2c0a2",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-63e4f918",[[1,"limel-menu",{label:[513],items:[16],disabled:[516],openDirection:[513,"open-direction"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"],fixed:[4]}]]],["p-1a3a9bfd",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516]}]]],["p-3df01502",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[1],actions:[16]}]]],["p-c636bfcf",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-dc5b3f45",[[1,"limel-popover",{open:[4]}]]],["p-b88e7350",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-191f05bc",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-67c48f98",[[1,"limel-table",{data:[16],columns:[16],mode:[1],pageSize:[2,"page-size"],totalRows:[2,"total-rows"],sorting:[16],activeRow:[1040],movableColumns:[4,"movable-columns"],loading:[4],page:[2],emptyMessage:[1,"empty-message"]}]]],["p-79541c2b",[[1,"limel-checkbox",{disabled:[516],readonly:[516],label:[513],checked:[516],required:[516],modified:[32]}]]],["p-231f62ba",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}]]],["p-467c87f6",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-7c6f6b80",[[1,"limel-config",{config:[16]}]]],["p-f94cbe50",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-2476f7bb",[[1,"limel-form",{schema:[16],value:[16],propsFactory:[16]}]]],["p-6d9f679d",[[1,"limel-grid"]]],["p-3a21fa33",[[1,"limel-linear-progress",{value:[2],indeterminate:[4]}]]],["p-af7c5b11",[[1,"limel-slider",{disabled:[516],readonly:[516],factor:[514],label:[513],helperText:[513,"helper-text"],unit:[513],value:[514],valuemax:[514],valuemin:[514],step:[514],percentageClass:[32]}]]],["p-16c336e8",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-c53695a3",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],value:[516],fieldId:[32]}]]],["p-30c4b32a",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516],relayout:[64]}]]],["p-eb81fc35",[[1,"limel-badge",{label:[514]}]]],["p-61ecc7f1",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-8a831c42",[[1,"limel-tooltip",{label:[513],helperLabel:[513,"helper-label"],elementId:[513,"element-id"],open:[32]}]]],["p-e9b4bdac",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-6e3b6e69",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4]}]]],["p-c45238b6",[[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-fa880bd6",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-e078c459",[[1,"limel-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{open:[4],allowClicksElement:[16]}],[1,"limel-portal",{openDirection:[1,"open-direction"],position:[1],containerId:[1,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[4,"inherit-parent-width"],visible:[4]}]]],["p-5577f962",[[1,"limel-input-field",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],required:[516],value:[513],trailingIcon:[513,"trailing-icon"],leadingIcon:[513,"leading-icon"],pattern:[513],type:[513],formatNumber:[516,"format-number"],step:[520],max:[514],min:[514],maxlength:[514],minlength:[514],completions:[16],showLink:[516,"show-link"],isFocused:[32],isModified:[32],showCompletions:[32]}],[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1]}]]],["p-034f336b",[[1,"limel-chip-set",{value:[16],type:[513],label:[513],disabled:[516],readonly:[516],maxItems:[514,"max-items"],required:[516],searchLabel:[513,"search-label"],emptyInputOnBlur:[516,"empty-input-on-blur"],clearAllButton:[4,"clear-all-button"],leadingIcon:[513,"leading-icon"],delimiter:[513],language:[1],editMode:[32],textValue:[32],blurred:[32],inputChipIndexSelected:[32],getEditMode:[64],setFocus:[64],emptyInput:[64]}]]],["p-f3779c9e",[[1,"limel-tooltip-content",{label:[513],helperLabel:[513,"helper-label"]}]]],["p-136230d6",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]]],e)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as i,g as e}from"./p-fabb836f.js";import{c as s}from"./p-6c094f3f.js";const
|
|
1
|
+
import{r as t,h as i,g as e}from"./p-fabb836f.js";import{c as s}from"./p-6c094f3f.js";const l=class{constructor(i){t(this,i),this.showTooltip=()=>{this.showTooltipTimeoutHandle=window.setTimeout((()=>{this.open=!0}),500)},this.hideTooltip=()=>{clearTimeout(this.showTooltipTimeoutHandle),this.open=!1},this.portalId=s(),this.tooltipId=s()}connectedCallback(){this.setOwnerAriaLabel(),this.addListeners()}disconnectedCallback(){this.removeListeners()}render(){const t=getComputedStyle(this.host).getPropertyValue("--tooltip-z-index");return i("div",{class:"trigger-anchor"},i("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t,"pointer-events":"none"}},i("limel-tooltip-content",{label:this.label,helperLabel:this.helperLabel,role:"tooltip","aria-hidden":!this.open,id:this.tooltipId})))}setOwnerAriaLabel(){const t=this.getOwnerElement();null==t||t.setAttribute("aria-describedby",this.tooltipId)}addListeners(){const t=this.getOwnerElement();null==t||t.addEventListener("mouseover",this.showTooltip),null==t||t.addEventListener("mouseout",this.hideTooltip),null==t||t.addEventListener("click",this.hideTooltip)}removeListeners(){const t=this.getOwnerElement();null==t||t.removeEventListener("mouseover",this.showTooltip),null==t||t.removeEventListener("mouseout",this.hideTooltip),null==t||t.removeEventListener("click",this.hideTooltip)}getOwnerElement(){var t;let i=this.host;do{i=i.parentNode}while(i&&i.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&i.nodeType!==Node.DOCUMENT_NODE);return null===(t=i)||void 0===t?void 0:t.getElementById(this.elementId)}get host(){return e(this)}};l.style=".trigger-anchor{display:inline-block;position:relative}";export{l as limel_tooltip}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as o}from"./p-fabb836f.js";const r=class{constructor(o){t(this,o)}render(){return o("div",{class:"tooltip-content"},o("div",{class:"label"},this.label),o("div",{class:"helper-label"},this.helperLabel))}};r.style=".tooltip-content{animation:display-tooltip 0.2s ease;display:flex;flex-direction:row;border-radius:0.25rem;padding:0.25rem 0.5rem;font-size:0.875rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}.tooltip-content .label{color:rgb(var(--contrast-200))}.tooltip-content .helper-label{color:rgb(var(--contrast-800));padding:0 0 0 1rem}.tooltip-content .helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";export{r as limel_tooltip_content}
|
|
@@ -1,15 +1,41 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
* of
|
|
2
|
+
* A tooltip can be used to display a descriptive text for any element.
|
|
3
|
+
* The displayed content must be a brief and supplemental string of text,
|
|
4
|
+
* identifying the element or describing its function for the user,
|
|
5
|
+
* helping them better understand unfamiliar objects that aren't described
|
|
6
|
+
* directly in the UI.
|
|
4
7
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
+
* ## Interaction
|
|
9
|
+
* The tooltip appears after a slight delay, when the element is hovered;
|
|
10
|
+
* and disappears as soon as the cursor leaves the element.
|
|
11
|
+
* Therefore, users cannot interact with the tip, but if the trigger element
|
|
12
|
+
* itself is interactive, it will remain interactible even with a tooltip bound
|
|
13
|
+
* to it.
|
|
14
|
+
*
|
|
15
|
+
* :::note
|
|
16
|
+
* In order to display the tooltip, the tooltip element and its trigger element
|
|
17
|
+
* must be within the same document or document fragment.
|
|
18
|
+
* A good practice is to just place them next to each other like below:
|
|
8
19
|
*
|
|
9
20
|
* ```html
|
|
10
21
|
* <limel-button icon="search" id="tooltip-example" />
|
|
11
22
|
* <limel-tooltip label="Search" elementId="tooltip-example" />
|
|
12
23
|
* ```
|
|
24
|
+
* :::
|
|
25
|
+
*
|
|
26
|
+
* ## Usage
|
|
27
|
+
* - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.
|
|
28
|
+
* Use them only when they add significant value.
|
|
29
|
+
* - A good tip is concise, helpful, and informative.
|
|
30
|
+
* Don't explain the obvious or simply repeat what is already on the screen.
|
|
31
|
+
* When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
|
|
32
|
+
* - If the tip is essential to the primary tasks that the user is performing,
|
|
33
|
+
* such as warnings or important notes, include the information directly in the
|
|
34
|
+
* interface instead.
|
|
35
|
+
* - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
|
|
36
|
+
* use that, not a tooltip.
|
|
37
|
+
* - Make sure to use the tooltip on an element that users naturally and
|
|
38
|
+
* effortlessly recognize can be hovered.
|
|
13
39
|
*
|
|
14
40
|
* @exampleComponent limel-example-tooltip
|
|
15
41
|
* @private
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,h as t}from"./p-fabb836f.js";const r=class{constructor(t){o(this,t)}render(){return t("div",{class:"tooltip-content"},t("div",{class:"tooltip"},this.label),t("div",{class:"helperLabel"},this.helperLabel))}};r.style=".tooltip-content{display:flex;flex-direction:row;color:rgb(var(--color-gray-default));border-radius:0.5rem;width:auto;display:flex;padding:0.75rem;transition:opacity 150ms ease-out;margin-top:0.3rem;background-color:rgb(var(--color-gray-darker))}.tooltip-content .tooltip{color:rgb(var(--color-gray-lighter))}.tooltip-content .helperLabel{padding:0 0 0 1rem}.tooltip-content .helperLabel:empty{display:none}";export{r as limel_tooltip_content}
|