Skip to content

Commit e00c956

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 3350a41 commit e00c956

File tree

8 files changed

+100
-232
lines changed

8 files changed

+100
-232
lines changed

‎COMPONENT_INDEX.md

+19-22
Original file line numberDiff line numberDiff line change
@@ -2824,10 +2824,11 @@ None.
28242824

28252825
### Props
28262826

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

28322833
### Slots
28332834

@@ -4541,22 +4542,20 @@ None.
45414542

45424543
### Props
45434544

4544-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4545-
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
4546-
| refIcon | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
4547-
| refTooltip | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
4548-
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
4549-
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
4550-
| 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 |
4551-
| 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 |
4552-
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
4553-
| 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;` |
4554-
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
4555-
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
4556-
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
4557-
| tooltipId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
4558-
| triggerId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
4559-
| triggerText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
4545+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4546+
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
4547+
| refIcon | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
4548+
| refTooltip | No | <code>let</code> | Yes | -- | <code>null</code> | Obtain a reference to the tooltip HTML element |
4549+
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
4550+
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
4551+
| 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 |
4552+
| 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;` |
4553+
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
4554+
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
4555+
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
4556+
| tooltipId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
4557+
| triggerId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
4558+
| triggerText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text<br />This is deprecated. Use default slot instead |
45604559

45614560
### Slots
45624561

@@ -4572,8 +4571,6 @@ None.
45724571
| :--------- | :--------- | :---------------- |
45734572
| open | dispatched | <code>null</code> |
45744573
| close | dispatched | <code>null</code> |
4575-
| click | forwarded | -- |
4576-
| mousedown | forwarded | -- |
45774574

45784575
## `TooltipDefinition`
45794576

‎docs/src/COMPONENT_API.json

+15-30
Original file line numberDiff line numberDiff line change
@@ -9006,6 +9006,18 @@
90069006
"isRequired": false,
90079007
"constant": false,
90089008
"reactive": false
9009+
},
9010+
{
9011+
"name": "ref",
9012+
"kind": "let",
9013+
"description": "Obtain a reference to the popover content HTML element",
9014+
"type": "null | HTMLSpanElement",
9015+
"value": "null",
9016+
"isFunction": false,
9017+
"isFunctionDeclaration": false,
9018+
"isRequired": false,
9019+
"constant": false,
9020+
"reactive": true
90099021
}
90109022
],
90119023
"moduleExports": [],
@@ -13990,19 +14002,7 @@
1399014002
"name": "align",
1399114003
"kind": "let",
1399214004
"description": "Set the alignment of the tooltip relative to the icon",
13993-
"type": "\"start\" | \"center\" | \"end\"",
13994-
"value": "\"center\"",
13995-
"isFunction": false,
13996-
"isFunctionDeclaration": false,
13997-
"isRequired": false,
13998-
"constant": false,
13999-
"reactive": false
14000-
},
14001-
{
14002-
"name": "direction",
14003-
"kind": "let",
14004-
"description": "Set the direction of the tooltip relative to the button",
14005-
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
14005+
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
1400614006
"value": "\"bottom\"",
1400714007
"isFunction": false,
1400814008
"isFunctionDeclaration": false,
@@ -14022,18 +14022,6 @@
1402214022
"constant": false,
1402314023
"reactive": true
1402414024
},
14025-
{
14026-
"name": "hideIcon",
14027-
"kind": "let",
14028-
"description": "Set to `true` to hide the tooltip icon",
14029-
"type": "boolean",
14030-
"value": "false",
14031-
"isFunction": false,
14032-
"isFunctionDeclaration": false,
14033-
"isRequired": false,
14034-
"constant": false,
14035-
"reactive": false
14036-
},
1403714025
{
1403814026
"name": "icon",
1403914027
"kind": "let",
@@ -14108,7 +14096,7 @@
1410814096
{
1410914097
"name": "triggerText",
1411014098
"kind": "let",
14111-
"description": "Set the tooltip button text",
14099+
"description": "Set the tooltip button text\nThis is deprecated. Use default slot instead",
1411214100
"type": "string",
1411314101
"value": "\"\"",
1411414102
"isFunction": false,
@@ -14133,7 +14121,6 @@
1413314121
"name": "refTooltip",
1413414122
"kind": "let",
1413514123
"description": "Obtain a reference to the tooltip HTML element",
14136-
"type": "null | HTMLDivElement",
1413714124
"value": "null",
1413814125
"isFunction": false,
1413914126
"isFunctionDeclaration": false,
@@ -14172,9 +14159,7 @@
1417214159
],
1417314160
"events": [
1417414161
{ "type": "dispatched", "name": "open", "detail": "null" },
14175-
{ "type": "dispatched", "name": "close", "detail": "null" },
14176-
{ "type": "forwarded", "name": "click", "element": "div" },
14177-
{ "type": "forwarded", "name": "mousedown", "element": "div" }
14162+
{ "type": "dispatched", "name": "close", "detail": "null" }
1417814163
],
1417914164
"typedefs": [],
1418014165
"rest_props": { "type": "Element", "name": "div" }

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

+11-34
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

+2-2
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)