mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(v11): Tooltip

Browse source 
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.
This commit is contained in:
Gregor Wassmann 2023-10-07 12:01:01 +02:00
commit e00c956a66
8 changed files with 100 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

45
docs/src/COMPONENT_API.json
View file

@ -9006,6 +9006,18 @@
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the popover content HTML element",
"type": "null | HTMLSpanElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
}
],
"moduleExports": [],
@ -13990,19 +14002,7 @@
"name": "align",
"kind": "let",
"description": "Set the alignment of the tooltip relative to the icon",
"type": "\"start\" | \"center\" | \"end\"",
"value": "\"center\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "direction",
"kind": "let",
"description": "Set the direction of the tooltip relative to the button",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
"value": "\"bottom\"",
"isFunction": false,
"isFunctionDeclaration": false,
@ -14022,18 +14022,6 @@
"constant": false,
"reactive": true
},
{
"name": "hideIcon",
"kind": "let",
"description": "Set to `true` to hide the tooltip icon",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "icon",
"kind": "let",
@ -14108,7 +14096,7 @@
{
"name": "triggerText",
"kind": "let",
"description": "Set the tooltip button text",
"description": "Set the tooltip button text\nThis is deprecated. Use default slot instead",
"type": "string",
"value": "\"\"",
"isFunction": false,
@ -14133,7 +14121,6 @@
"name": "refTooltip",
"kind": "let",
"description": "Obtain a reference to the tooltip HTML element",
"type": "null | HTMLDivElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
@ -14172,9 +14159,7 @@
],
"events": [
{ "type": "dispatched", "name": "open", "detail": "null" },
{ "type": "dispatched", "name": "close", "detail": "null" },
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mousedown", "element": "div" }
{ "type": "dispatched", "name": "close", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }

45
docs/src/pages/components/Tooltip.svx
View file

@ -13,69 +13,46 @@ components: ["Tooltip", "TooltipFooter"]
By default, the tooltip is triggered by an information icon.
<Tooltip>
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
</Tooltip>
## With trigger text
This is deprecated in Carbon v11.
<Tooltip triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
</Tooltip>
## Reactive example
<FileSource src="/framed/Tooltip/TooltipReactive" />
## Directions
<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
<Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
## Alignment
<Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
<Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
<Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
<Tooltip triggerText="Left" align="left">Left</Tooltip>
<Tooltip triggerText="Right" align="right">Right</Tooltip>
<Tooltip triggerText="Top" align="top">Top</Tooltip>
## Interactive
<Tooltip triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
<TooltipFooter selectorPrimaryFocus="#d">
<Link href="/">Learn more</Link>
<Button id="d" size="small">Manage</Button>
</TooltipFooter>
</TooltipFooter>
</Tooltip>
## Custom icon (component)
<Tooltip triggerText="Resource list" icon={Catalog}>
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
</Tooltip>
## Custom icon (slot)
<Tooltip triggerText="Resource list">
<div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
</Tooltip>
## Hidden icon
<Tooltip hideIcon triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
</p>
</Tooltip>

4
docs/src/pages/framed/Tooltip/TooltipReactive.svelte
View file

@ -4,8 +4,8 @@
let open = true;
</script>
<Tooltip bind:open triggerText="Resource list" align="start">
<p>Resources are provisioned based on your account's organization.</p>
<Tooltip bind:open align="bottom-left">
Resources are provisioned based on your account's organization.
</Tooltip>
<div style="margin-top: var(--bx-spacing-12);">