Skip to content

Commit 82f582c

Browse files
gregorwgregorw
committed
feat(v11): Tooltip
Refactor `Tooltip` to use `Popover` component internally. **Breaking changes** - `direction` is replaced by additional `align` options. - `hideIcon` property is removed. **Limitations** - The reference implementaiton uses the trigger content instead of the tooltip content as primary slot. This is not considered in this refactoring since it would be too big of a change. - Instead of `TooltipFooter` a new `Toggletip` component would be required which is not included in this patch.
1 parent 4bbd925 commit 82f582c

File tree

8 files changed

+100
-232
lines changed

8 files changed

+100
-232
lines changed

‎COMPONENT_INDEX.md

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2828,10 +2828,11 @@ None.
28282828

28292829
### Props
28302830

2831-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2832-
| :----------- | :------- | :--------------- | :------- | --------------- | ----------------- | ----------- |
2833-
| className | No | <code>let</code> | No | -- | <code>null</code> | -- |
2834-
| contentProps | No | <code>let</code> | No | <code>{}</code> | <code>{}</code> | -- |
2831+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2832+
| :----------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | ------------------------------------------------------ |
2833+
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLSpanElement</code> | <code>null</code> | Obtain a reference to the popover content HTML element |
2834+
| className | No | <code>let</code> | No | -- | <code>null</code> | -- |
2835+
| contentProps | No | <code>let</code> | No | <code>{}</code> | <code>{}</code> | -- |
28352836

28362837
### Slots
28372838

@@ -4547,22 +4548,20 @@ None.
45474548

45484549
### Props
45494550

4550-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4551-
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
4552-
| refIcon | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
4553-
| refTooltip | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
4554-
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
4555-
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
4556-
| align | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
4557-
| direction | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
4558-
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
4559-
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
4560-
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
4561-
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
4562-
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
4563-
| tooltipId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
4564-
| triggerId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
4565-
| triggerText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
4551+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4552+
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
4553+
| refIcon | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
4554+
| refTooltip | No | <code>let</code> | Yes | -- | <code>null</code> | Obtain a reference to the tooltip HTML element |
4555+
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
4556+
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
4557+
| align | No | <code>let</code> | No | <code>"top" &#124; "top-left" &#124; "top-right" &#124; "bottom" &#124; "bottom-left" &#124; "bottom-right" &#124; "left" &#124; "left-bottom" &#124; "left-top" &#124; "right" &#124; "right-bottom" &#124; "right-top"</code> | <code>"bottom"</code> | Set the alignment of the tooltip relative to the icon |
4558+
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
4559+
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
4560+
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
4561+
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
4562+
| tooltipId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
4563+
| triggerId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
4564+
| triggerText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text<br />This is deprecated. Use default slot instead |
45664565

45674566
### Slots
45684567

@@ -4578,8 +4577,6 @@ None.
45784577
| :--------- | :--------- | :---------------- |
45794578
| open | dispatched | <code>null</code> |
45804579
| close | dispatched | <code>null</code> |
4581-
| click | forwarded | -- |
4582-
| mousedown | forwarded | -- |
45834580

45844581
## `TooltipDefinition`
45854582

‎docs/src/COMPONENT_API.json

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9010,6 +9010,18 @@
90109010
"isRequired": false,
90119011
"constant": false,
90129012
"reactive": false
9013+
},
9014+
{
9015+
"name": "ref",
9016+
"kind": "let",
9017+
"description": "Obtain a reference to the popover content HTML element",
9018+
"type": "null | HTMLSpanElement",
9019+
"value": "null",
9020+
"isFunction": false,
9021+
"isFunctionDeclaration": false,
9022+
"isRequired": false,
9023+
"constant": false,
9024+
"reactive": true
90139025
}
90149026
],
90159027
"moduleExports": [],
@@ -14016,19 +14028,7 @@
1401614028
"name": "align",
1401714029
"kind": "let",
1401814030
"description": "Set the alignment of the tooltip relative to the icon",
14019-
"type": "\"start\" | \"center\" | \"end\"",
14020-
"value": "\"center\"",
14021-
"isFunction": false,
14022-
"isFunctionDeclaration": false,
14023-
"isRequired": false,
14024-
"constant": false,
14025-
"reactive": false
14026-
},
14027-
{
14028-
"name": "direction",
14029-
"kind": "let",
14030-
"description": "Set the direction of the tooltip relative to the button",
14031-
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
14031+
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
1403214032
"value": "\"bottom\"",
1403314033
"isFunction": false,
1403414034
"isFunctionDeclaration": false,
@@ -14048,18 +14048,6 @@
1404814048
"constant": false,
1404914049
"reactive": true
1405014050
},
14051-
{
14052-
"name": "hideIcon",
14053-
"kind": "let",
14054-
"description": "Set to `true` to hide the tooltip icon",
14055-
"type": "boolean",
14056-
"value": "false",
14057-
"isFunction": false,
14058-
"isFunctionDeclaration": false,
14059-
"isRequired": false,
14060-
"constant": false,
14061-
"reactive": false
14062-
},
1406314051
{
1406414052
"name": "icon",
1406514053
"kind": "let",
@@ -14134,7 +14122,7 @@
1413414122
{
1413514123
"name": "triggerText",
1413614124
"kind": "let",
14137-
"description": "Set the tooltip button text",
14125+
"description": "Set the tooltip button text\nThis is deprecated. Use default slot instead",
1413814126
"type": "string",
1413914127
"value": "\"\"",
1414014128
"isFunction": false,
@@ -14159,7 +14147,6 @@
1415914147
"name": "refTooltip",
1416014148
"kind": "let",
1416114149
"description": "Obtain a reference to the tooltip HTML element",
14162-
"type": "null | HTMLDivElement",
1416314150
"value": "null",
1416414151
"isFunction": false,
1416514152
"isFunctionDeclaration": false,
@@ -14198,9 +14185,7 @@
1419814185
],
1419914186
"events": [
1420014187
{ "type": "dispatched", "name": "open", "detail": "null" },
14201-
{ "type": "dispatched", "name": "close", "detail": "null" },
14202-
{ "type": "forwarded", "name": "click", "element": "div" },
14203-
{ "type": "forwarded", "name": "mousedown", "element": "div" }
14188+
{ "type": "dispatched", "name": "close", "detail": "null" }
1420414189
],
1420514190
"typedefs": [],
1420614191
"rest_props": { "type": "Element", "name": "div" }

‎docs/src/pages/components/Tooltip.svx

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,69 +13,46 @@ components: ["Tooltip", "TooltipFooter"]
1313
By default, the tooltip is triggered by an information icon.
1414

1515
<Tooltip>
16-
<p>
17-
Resources are provisioned based on your account's organization.
18-
</p>
16+
Resources are provisioned based on your account's organization.
1917
</Tooltip>
2018

2119
## With trigger text
2220

21+
This is deprecated in Carbon v11.
22+
2323
<Tooltip triggerText="Resource list">
24-
<p>
25-
Resources are provisioned based on your account's organization.
26-
</p>
24+
Resources are provisioned based on your account's organization.
2725
</Tooltip>
2826

2927
## Reactive example
3028

3129
<FileSource src="/framed/Tooltip/TooltipReactive" />
3230

33-
## Directions
34-
35-
<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
36-
<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
37-
<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
38-
<Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
39-
4031
## Alignment
4132

42-
<Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
43-
<Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
44-
<Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
33+
<Tooltip triggerText="Left" align="left">Left</Tooltip>
34+
<Tooltip triggerText="Right" align="right">Right</Tooltip>
35+
<Tooltip triggerText="Top" align="top">Top</Tooltip>
4536

4637
## Interactive
4738

4839
<Tooltip triggerText="Resource list">
49-
<p>
50-
Resources are provisioned based on your account's organization.
51-
</p>
40+
Resources are provisioned based on your account's organization.
5241
<TooltipFooter selectorPrimaryFocus="#d">
5342
<Link href="/">Learn more</Link>
5443
<Button id="d" size="small">Manage</Button>
55-
</TooltipFooter>
44+
</TooltipFooter>
5645
</Tooltip>
5746

5847
## Custom icon (component)
5948

6049
<Tooltip triggerText="Resource list" icon={Catalog}>
61-
<p>
62-
Resources are provisioned based on your account's organization.
63-
</p>
50+
Resources are provisioned based on your account's organization.
6451
</Tooltip>
6552

6653
## Custom icon (slot)
6754

6855
<Tooltip triggerText="Resource list">
6956
<div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
70-
<p>
71-
Resources are provisioned based on your account's organization.
72-
</p>
57+
Resources are provisioned based on your account's organization.
7358
</Tooltip>
74-
75-
## Hidden icon
76-
77-
<Tooltip hideIcon triggerText="Resource list">
78-
<p>
79-
Resources are provisioned based on your account's organization.
80-
</p>
81-
</Tooltip>

‎docs/src/pages/framed/Tooltip/TooltipReactive.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
let open = true;
55
</script>
66

7-
<Tooltip bind:open triggerText="Resource list" align="start">
8-
<p>Resources are provisioned based on your account's organization.</p>
7+
<Tooltip bind:open align="bottom-left">
8+
Resources are provisioned based on your account's organization.
99
</Tooltip>
1010

1111
<div style="margin-top: var(--bx-spacing-12);">

0 commit comments

Comments
 (0)