@spectrum-web-components/tooltip 0.40.0 → 0.40.1
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/README.md +16 -2
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -46,8 +46,7 @@ Tooltips can be top, bottom, left, or right.
|
|
|
46
46
|
By default, Tooltip provides styling without behavior.
|
|
47
47
|
You must combine it with an [Overlay Trigger](https://opensource.adobe.com/spectrum-web-components/components/overlay-trigger/#%22hover%22-content-only) in order to manage its overlay behavior.
|
|
48
48
|
|
|
49
|
-
You can
|
|
50
|
-
which automaticaly binds to the parent element's hover interaction:
|
|
49
|
+
You can use the tooltip as the descendant of an interactive element, such as [Action Button](https://opensource.adobe.com/spectrum-web-components/components/action-button/), by applying the `self-managed` attribute which automatically binds the Tooltip to its first interactive ancestor element's focus/hover interactions:
|
|
51
50
|
|
|
52
51
|
```html
|
|
53
52
|
<sp-action-button>
|
|
@@ -59,6 +58,21 @@ which automaticaly binds to the parent element's hover interaction:
|
|
|
59
58
|
This is especially useful when inserting an intermediate `<overlay-trigger>` would interfere with
|
|
60
59
|
parent/child relationships, such as between `<sp-action-group>` and `<sp-action-button>`.
|
|
61
60
|
|
|
61
|
+
Note that an interactive element is an element that can receive focus during tab navigation, such as `sp-action-button`, `sp-action-menu`, `sp-field-label` etc.
|
|
62
|
+
|
|
63
|
+
Given that tooltip is not focusable by itself, it would not show up during tab navigation. Thus a tooltip would not be accessible if used with a non-interactive element, such as `<sp-icon-*>`.
|
|
64
|
+
|
|
65
|
+
The correct way to make it accessible would be to wrap it under an interactive element, such as `sp-action-button`:
|
|
66
|
+
|
|
67
|
+
```html
|
|
68
|
+
<sp-action-button size="s">
|
|
69
|
+
<sp-icon-info></sp-icon-info>
|
|
70
|
+
<sp-tooltip self-managed placement="right">
|
|
71
|
+
Display something here
|
|
72
|
+
</sp-tooltip>
|
|
73
|
+
</sp-action-button>
|
|
74
|
+
```
|
|
75
|
+
|
|
62
76
|
## Variants
|
|
63
77
|
|
|
64
78
|
### Informative
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tooltip",
|
|
3
|
-
"version": "0.40.
|
|
3
|
+
"version": "0.40.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.40.
|
|
61
|
-
"@spectrum-web-components/overlay": "^0.40.
|
|
62
|
-
"@spectrum-web-components/shared": "^0.40.
|
|
60
|
+
"@spectrum-web-components/base": "^0.40.1",
|
|
61
|
+
"@spectrum-web-components/overlay": "^0.40.1",
|
|
62
|
+
"@spectrum-web-components/shared": "^0.40.1"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@spectrum-css/tooltip": "^5.1.11"
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"./sp-*.js",
|
|
71
71
|
"./**/*.dev.js"
|
|
72
72
|
],
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "a75c4f83094c505d64658dbc7de20b5f18a8fde1"
|
|
74
74
|
}
|