Skip to content

Commit 3350a41

Browse files
gregorwgregorw
committed
feat(v11): TooltipDefinition
In v11 the definintion tooltip uses the `Popover` component internally. While the component is called `DefinitionTooltip` in the reference implementation, it is not renamed at this point. - rename `tooltipText` to `definition` - rename `tooltip` slot to `definition` - remove `direction` (see `align`) - use `align` values from `Popover` and set to `bottom-left` as default instead of `center`
1 parent d139d19 commit 3350a41

File tree

6 files changed

+61
-92
lines changed

6 files changed

+61
-92
lines changed

‎COMPONENT_INDEX.md

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4579,21 +4579,20 @@ None.
45794579

45804580
### Props
45814581

4582-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4583-
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
4584-
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
4585-
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
4586-
| tooltipText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text |
4587-
| 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 |
4588-
| direction | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
4589-
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip div element |
4582+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4583+
| :--------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
4584+
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
4585+
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
4586+
| definition | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the term definition. |
4587+
| 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-left"</code> | Set the alignment of the tooltip relative to the icon |
4588+
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip div element |
45904589

45914590
### Slots
45924591

4593-
| Slot name | Default | Props | Fallback |
4594-
| :-------- | :------ | :---- | :------------------------- |
4595-
| -- | Yes | -- | -- |
4596-
| tooltip | No | -- | <code>{tooltipText}</code> |
4592+
| Slot name | Default | Props | Fallback |
4593+
| :--------- | :------ | :---- | :------------------------ |
4594+
| -- | Yes | -- | -- |
4595+
| definition | No | -- | <code>{definition}</code> |
45974596

45984597
### Events
45994598

‎docs/src/COMPONENT_API.json

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14184,9 +14184,9 @@
1418414184
"filePath": "src/TooltipDefinition/TooltipDefinition.svelte",
1418514185
"props": [
1418614186
{
14187-
"name": "tooltipText",
14187+
"name": "definition",
1418814188
"kind": "let",
14189-
"description": "Specify the tooltip text",
14189+
"description": "Specify the term definition.",
1419014190
"type": "string",
1419114191
"value": "\"\"",
1419214192
"isFunction": false,
@@ -14211,20 +14211,8 @@
1421114211
"name": "align",
1421214212
"kind": "let",
1421314213
"description": "Set the alignment of the tooltip relative to the icon",
14214-
"type": "\"start\" | \"center\" | \"end\"",
14215-
"value": "\"center\"",
14216-
"isFunction": false,
14217-
"isFunctionDeclaration": false,
14218-
"isRequired": false,
14219-
"constant": false,
14220-
"reactive": false
14221-
},
14222-
{
14223-
"name": "direction",
14224-
"kind": "let",
14225-
"description": "Set the direction of the tooltip relative to the icon",
14226-
"type": "\"top\" | \"bottom\"",
14227-
"value": "\"bottom\"",
14214+
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
14215+
"value": "\"bottom-left\"",
1422814216
"isFunction": false,
1422914217
"isFunctionDeclaration": false,
1423014218
"isRequired": false,
@@ -14260,9 +14248,9 @@
1426014248
"slots": [
1426114249
{ "name": "__default__", "default": true, "slot_props": "{}" },
1426214250
{
14263-
"name": "tooltip",
14251+
"name": "definition",
1426414252
"default": false,
14265-
"fallback": "{tooltipText}",
14253+
"fallback": "{definition}",
1426614254
"slot_props": "{}"
1426714255
}
1426814256
],
@@ -14275,8 +14263,7 @@
1427514263
{ "type": "forwarded", "name": "mouseleave", "element": "button" },
1427614264
{ "type": "forwarded", "name": "focus", "element": "button" }
1427714265
],
14278-
"typedefs": [],
14279-
"rest_props": { "type": "Element", "name": "span" }
14266+
"typedefs": []
1428014267
},
1428114268
{
1428214269
"moduleName": "TooltipFooter",

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,25 @@
55

66
## Default
77

8-
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
8+
<TooltipDefinition definition="IBM Corporate Headquarters is based in Armonk, New York.">
99
Armonk
1010
</TooltipDefinition>
1111

12-
## Custom tooltip direction and alignment
12+
## Custom tooltip alignment
1313

14-
Customize the tooltip menu direction and alignment through the `direction` and `align` props.
14+
Customize the tooltip alignment through the `align` prop.
1515

16-
By default, `direction` is `"bottom"` and `align` is `"center"`.
16+
By default, `align` is `"bottom-left"`.
1717

18-
<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
18+
<TooltipDefinition align="top" definition="IBM Corporate Headquarters is based in Armonk, New York.">
1919
Armonk
2020
</TooltipDefinition>
2121

22-
## Custom tooltip slot
22+
## Custom definition slot
2323

2424
<TooltipDefinition>
2525
Armonk
26-
<span slot="tooltip" style="color: red">
26+
<span slot="definition" style="color: red">
2727
IBM Corporate Headquarters is based in Armonk, New York.
2828
</span>
2929
</TooltipDefinition>

‎src/TooltipDefinition/TooltipDefinition.svelte

Lines changed: 14 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
* @event {null} close
55
*/
66
7-
/** Specify the tooltip text */
8-
export let tooltipText = "";
7+
/** Specify the term definition. */
8+
export let definition = "";
99
1010
/**
1111
* Set to `true` to open the tooltip
@@ -14,15 +14,9 @@
1414
1515
/**
1616
* Set the alignment of the tooltip relative to the icon
17-
* @type {"start" | "center" | "end"}
17+
* @type {"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"}
1818
*/
19-
export let align = "center";
20-
21-
/**
22-
* Set the direction of the tooltip relative to the icon
23-
* @type {"top" | "bottom"}
24-
*/
25-
export let direction = "bottom";
19+
export let align = "bottom-left";
2620
2721
/** Set an id for the tooltip div element */
2822
export let id = "ccs-" + Math.random().toString(36);
@@ -31,6 +25,8 @@
3125
export let ref = null;
3226
3327
import { createEventDispatcher } from "svelte";
28+
import Popover from "../Popover/Popover.svelte";
29+
import PopoverContent from "../Popover/PopoverContent.svelte";
3430
3531
const dispatch = createEventDispatcher();
3632
@@ -48,38 +44,25 @@
4844
/>
4945

5046
<!-- svelte-ignore a11y-no-static-element-interactions -->
51-
<span
52-
class:bx--tooltip--definition="{true}"
53-
class:bx--tooltip--a11y="{true}"
54-
{...$$restProps}
55-
on:mouseenter="{show}"
56-
on:mouseleave="{hide}"
57-
>
47+
<Popover highContrast dropShadow="{false}" bind:open align="{align}">
5848
<button
5949
bind:this="{ref}"
6050
type="button"
6151
aria-describedby="{id}"
62-
class:bx--tooltip--a11y="{true}"
63-
class:bx--tooltip__trigger="{true}"
64-
class:bx--tooltip__trigger--definition="{true}"
65-
class:bx--tooltip--hidden="{!open}"
66-
class:bx--tooltip--visible="{open}"
67-
class:bx--tooltip--top="{direction === 'top'}"
68-
class:bx--tooltip--bottom="{direction === 'bottom'}"
69-
class:bx--tooltip--align-start="{align === 'start'}"
70-
class:bx--tooltip--align-center="{align === 'center'}"
71-
class:bx--tooltip--align-end="{align === 'end'}"
52+
class:bx--definition-term="{true}"
7253
on:click
7354
on:mouseover
7455
on:mouseenter
7556
on:mouseleave
7657
on:focus
7758
on:focus="{show}"
7859
on:blur="{hide}"
60+
on:mouseenter="{show}"
61+
on:mouseleave="{hide}"
7962
>
8063
<slot />
8164
</button>
82-
<div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
83-
<slot name="tooltip">{tooltipText}</slot>
84-
</div>
85-
</span>
65+
<PopoverContent className="{'bx--definition-tooltip'}">
66+
<slot name="definition">{definition}</slot>
67+
</PopoverContent>
68+
</Popover>

‎tests/TooltipDefinition.test.svelte

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,21 @@
88
bind:open
99
on:open
1010
on:close
11-
tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
11+
definition="IBM Corporate Headquarters is based in Armonk, New York."
1212
>
1313
Armonk
1414
</TooltipDefinition>
1515

1616
<TooltipDefinition
17-
direction="top"
18-
align="start"
19-
tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
17+
align="top"
18+
definition="IBM Corporate Headquarters is based in Armonk, New York."
2019
>
2120
Armonk
2221
</TooltipDefinition>
2322

2423
<TooltipDefinition>
2524
Armonk
26-
<span slot="tooltip" style="color: red">
25+
<span slot="definition" style="color: red">
2726
IBM Corporate Headquarters is based in Armonk, New York.
2827
</span>
2928
</TooltipDefinition>

‎types/TooltipDefinition/TooltipDefinition.svelte.d.ts

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import type { SvelteComponentTyped } from "svelte";
2-
import type { SvelteHTMLElements } from "svelte/elements";
32

4-
type RestProps = SvelteHTMLElements["span"];
5-
6-
export interface TooltipDefinitionProps extends RestProps {
3+
export interface TooltipDefinitionProps {
74
/**
8-
* Specify the tooltip text
5+
* Specify the term definition.
96
* @default ""
107
*/
11-
tooltipText?: string;
8+
definition?: string;
129

1310
/**
1411
* Set to `true` to open the tooltip
@@ -18,15 +15,21 @@ export interface TooltipDefinitionProps extends RestProps {
1815

1916
/**
2017
* Set the alignment of the tooltip relative to the icon
21-
* @default "center"
18+
* @default "bottom-left"
2219
*/
23-
align?: "start" | "center" | "end";
24-
25-
/**
26-
* Set the direction of the tooltip relative to the icon
27-
* @default "bottom"
28-
*/
29-
direction?: "top" | "bottom";
20+
align?:
21+
| "top"
22+
| "top-left"
23+
| "top-right"
24+
| "bottom"
25+
| "bottom-left"
26+
| "bottom-right"
27+
| "left"
28+
| "left-bottom"
29+
| "left-top"
30+
| "right"
31+
| "right-bottom"
32+
| "right-top";
3033

3134
/**
3235
* Set an id for the tooltip div element
@@ -39,8 +42,6 @@ export interface TooltipDefinitionProps extends RestProps {
3942
* @default null
4043
*/
4144
ref?: null | HTMLButtonElement;
42-
43-
[key: `data-${string}`]: any;
4445
}
4546

4647
export default class TooltipDefinition extends SvelteComponentTyped<
@@ -54,5 +55,5 @@ export default class TooltipDefinition extends SvelteComponentTyped<
5455
mouseleave: WindowEventMap["mouseleave"];
5556
focus: WindowEventMap["focus"];
5657
},
57-
{ default: {}; tooltip: {} }
58+
{ default: {}; definition: {} }
5859
> {}

0 commit comments

Comments
 (0)