Skip to content

Commit a555fdc

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 45bdb47 commit a555fdc

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
@@ -4574,21 +4574,20 @@ None.
45744574

45754575
### Props
45764576

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

45864585
### Slots
45874586

4588-
| Slot name | Default | Props | Fallback |
4589-
| :-------- | :------ | :---- | :------------------------- |
4590-
| -- | Yes | -- | -- |
4591-
| tooltip | No | -- | <code>{tooltipText}</code> |
4587+
| Slot name | Default | Props | Fallback |
4588+
| :--------- | :------ | :---- | :------------------------ |
4589+
| -- | Yes | -- | -- |
4590+
| definition | No | -- | <code>{definition}</code> |
45924591

45934592
### Events
45944593

‎docs/src/COMPONENT_API.json

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14128,9 +14128,9 @@
1412814128
"filePath": "src/TooltipDefinition/TooltipDefinition.svelte",
1412914129
"props": [
1413014130
{
14131-
"name": "tooltipText",
14131+
"name": "definition",
1413214132
"kind": "let",
14133-
"description": "Specify the tooltip text",
14133+
"description": "Specify the term definition.",
1413414134
"type": "string",
1413514135
"value": "\"\"",
1413614136
"isFunction": false,
@@ -14155,20 +14155,8 @@
1415514155
"name": "align",
1415614156
"kind": "let",
1415714157
"description": "Set the alignment of the tooltip relative to the icon",
14158-
"type": "\"start\" | \"center\" | \"end\"",
14159-
"value": "\"center\"",
14160-
"isFunction": false,
14161-
"isFunctionDeclaration": false,
14162-
"isRequired": false,
14163-
"constant": false,
14164-
"reactive": false
14165-
},
14166-
{
14167-
"name": "direction",
14168-
"kind": "let",
14169-
"description": "Set the direction of the tooltip relative to the icon",
14170-
"type": "\"top\" | \"bottom\"",
14171-
"value": "\"bottom\"",
14158+
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
14159+
"value": "\"bottom-left\"",
1417214160
"isFunction": false,
1417314161
"isFunctionDeclaration": false,
1417414162
"isRequired": false,
@@ -14204,9 +14192,9 @@
1420414192
"slots": [
1420514193
{ "name": "__default__", "default": true, "slot_props": "{}" },
1420614194
{
14207-
"name": "tooltip",
14195+
"name": "definition",
1420814196
"default": false,
14209-
"fallback": "{tooltipText}",
14197+
"fallback": "{definition}",
1421014198
"slot_props": "{}"
1421114199
}
1421214200
],
@@ -14219,8 +14207,7 @@
1421914207
{ "type": "forwarded", "name": "mouseleave", "element": "button" },
1422014208
{ "type": "forwarded", "name": "focus", "element": "button" }
1422114209
],
14222-
"typedefs": [],
14223-
"rest_props": { "type": "Element", "name": "span" }
14210+
"typedefs": []
1422414211
},
1422514212
{
1422614213
"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)