Skip to content

Commit fd84381

Browse files
zvonimirfraszvonimirfras
authored
Merge pull request #469 from youda97/tooltip-icon
 feat(tooltip): Add definition and icon tooltip
2 parents c175059 + d869066 commit fd84381

File tree

5 files changed

+186
-25
lines changed

5 files changed

+186
-25
lines changed

‎src/dialog/dialog.module.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { DialogDirective } from "./dialog.directive";
1010
import { DialogPlaceholder } from "./dialog-placeholder.component";
1111

1212
import { Tooltip } from "./tooltip/tooltip.component";
13+
import { TooltipDefinition } from "./tooltip/tooltip-definition.component";
14+
import { TooltipIcon } from "./tooltip/tooltip-icon.component";
1315
import { TooltipDirective } from "./tooltip/tooltip.directive";
1416
import { EllipsisTooltip } from "./tooltip/ellipsis-tooltip.directive";
1517

@@ -28,6 +30,8 @@ export { DialogDirective } from "./dialog.directive";
2830
export { DialogPlaceholder } from "./dialog-placeholder.component";
2931

3032
export { Tooltip } from "./tooltip/tooltip.component";
33+
export { TooltipDefinition } from "./tooltip/tooltip-definition.component";
34+
export { TooltipIcon } from "./tooltip/tooltip-icon.component";
3135
export { TooltipDirective } from "./tooltip/tooltip.directive";
3236
export { EllipsisTooltip } from "./tooltip/ellipsis-tooltip.directive";
3337

@@ -40,6 +44,8 @@ export { OverflowMenuOption } from "./overflow-menu/overflow-menu-option.compone
4044
declarations: [
4145
Dialog,
4246
Tooltip,
47+
TooltipDefinition,
48+
TooltipIcon,
4349
OverflowMenu,
4450
OverflowMenuPane,
4551
DialogDirective,
@@ -52,6 +58,8 @@ export { OverflowMenuOption } from "./overflow-menu/overflow-menu-option.compone
5258
exports: [
5359
Dialog,
5460
Tooltip,
61+
TooltipDefinition,
62+
TooltipIcon,
5563
OverflowMenu,
5664
OverflowMenuPane,
5765
DialogDirective,

‎src/dialog/tooltip/tooltip-definition.component.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Component, Input, HostBinding } from "@angular/core";
2+
3+
@Component({
4+
selector: "ibm-tooltip-definition",
5+
template: `
6+
<button class="bx--tooltip__trigger" [attr.aria-describedby]="id">
7+
<ng-content></ng-content>
8+
</button>
9+
<div
10+
[id]="id"
11+
[ngClass]="{
12+
'bx--tooltip--definition__bottom' : placement === 'bottom',
13+
'bx--tooltip--definition__top' : placement === 'top'
14+
}"
15+
role="tooltip"
16+
[attr.aria-label]="content">
17+
<span class="bx--tooltip__caret"></span>
18+
<p>{{content}}</p>
19+
</div>
20+
`
21+
})
22+
export class TooltipDefinition {
23+
static tooltipItemCount = 0;
24+
25+
@Input() id = `definition-tooltip-${TooltipDefinition.tooltipItemCount++}`;
26+
/**
27+
* Body content for the `TooltipDefinition`.
28+
*/
29+
@Input() content: string;
30+
/**
31+
* The placement in which the `TooltipDefinition` appears.
32+
* Set to `"top"` to have it positioned above the trigger text
33+
*/
34+
@Input() placement: "bottom" | "top" = "bottom";
35+
36+
@HostBinding("class.bx--tooltip--definition") className = true;
37+
}

‎src/dialog/tooltip/tooltip-icon.component.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component, Input, HostBinding } from "@angular/core";
2+
3+
@Component({
4+
selector: "ibm-tooltip-icon",
5+
template: `
6+
<button
7+
class="bx--tooltip__trigger"
8+
[ngClass]="{
9+
'bx--tooltip--icon__bottom' : placement === 'bottom',
10+
'bx--tooltip--icon__top' : placement === 'top'
11+
}"
12+
[attr.aria-label]="content">
13+
<ng-content></ng-content>
14+
</button>
15+
`
16+
})
17+
export class TooltipIcon {
18+
/**
19+
* Body content for the `TooltipIcon`.
20+
*/
21+
@Input() content: string;
22+
/**
23+
* The placement in which the `TooltipIcon` appears.
24+
* Set to `"top"` to have it positioned above the icon
25+
*/
26+
@Input() placement: "bottom" | "top" = "bottom";
27+
28+
@HostBinding("class.bx--tooltip-icon") className = true;
29+
}

‎src/dialog/tooltip/tooltip.directive.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,10 @@ export class TooltipDirective extends DialogDirective {
4949
// tslint:disable-next-line:no-input-rename
5050
@Input("tooltip-type") tooltipType: "warning" | "error" | "" = "";
5151

52-
5352
@HostBinding("tabindex") tabIndex = 0;
5453

54+
@HostBinding("class.bx--tooltip__trigger") className = true;
55+
5556
@HostBinding("attr.aria-describedby") get descriptorId(): string {
5657
return this.expanded ? this.dialogConfig.compID : null;
5758
}

‎src/dialog/tooltip/tooltip.stories.ts‎

Lines changed: 110 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { storiesOf, moduleMetadata } from "@storybook/angular";
22
import { withNotes } from "@storybook/addon-notes";
33
import { action } from "@storybook/addon-actions";
4-
import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
4+
import { withKnobs, text, select } from "@storybook/addon-knobs/angular";
55

66
import { DialogModule, PlaceholderModule } from "../../";
77

@@ -15,35 +15,121 @@ storiesOf("Tooltip", module)
1515
)
1616
.addDecorator(withKnobs)
1717
.add("Basic", () => ({
18-
template: `
19-
<div>
20-
<span
21-
ibmTooltip="tooltip text"
22-
trigger="hover"
23-
placement="bottom"
24-
style="cursor: pointer;">
25-
Hover for tooltip
26-
</span>
27-
</div>
28-
`
29-
}))
30-
.add("With Template", () => ({
3118
template: `
3219
<div>
3320
<ng-template #template let-tooltip="tooltip">
34-
<p>hello</p>
35-
<div>
21+
<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.
22+
If more room is needed please use a modal instead.</p>
23+
<div class="bx--tooltip__footer">
24+
<a href="/" class="bx--link">Learn More</a>
3625
<button class="bx--btn bx--btn--primary" (click)="tooltip.doClose()">Close</button>
3726
</div>
3827
</ng-template>
39-
<span
40-
[ibmTooltip]="template"
41-
trigger="click"
42-
placement="bottom"
43-
style="cursor: pointer;">
44-
Click for tooltip
45-
</span>
28+
29+
<div class="bx--tooltip__label">
30+
{{triggerText}}
31+
<span
32+
[ibmTooltip]="template"
33+
trigger="click"
34+
[placement]="placement">
35+
<div role="button">
36+
<svg style="vertical-align: middle;" fill-rule="evenodd" height="16" role="img" viewBox="0 0 16 16" width="16" aria-label="tooltip">
37+
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1
38+
.4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
39+
</svg>
40+
</div>
41+
</span>
42+
</div>
4643
<ibm-placeholder></ibm-placeholder>
4744
</div>
48-
`
45+
`,
46+
props: {
47+
placement: select("Tooltip direction", ["bottom", "top", "left", "right"], "bottom"),
48+
triggerText: text("Trigger text", "Tooltip label")
49+
}
50+
}))
51+
.add("no icon", () => ({
52+
template: `
53+
<div>
54+
<ng-template #template let-tooltip="tooltip">
55+
<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.
56+
If more room is needed please use a modal instead.</p>
57+
<div class="bx--tooltip__footer">
58+
<a href="/" class="bx--link">Learn More</a>
59+
<button class="bx--btn bx--btn--primary" (click)="tooltip.doClose()">Close</button>
60+
</div>
61+
</ng-template>
62+
63+
<span
64+
[ibmTooltip]="template"
65+
trigger="click"
66+
[placement]="placement">
67+
{{triggerText}}
68+
</span>
69+
<ibm-placeholder></ibm-placeholder>
70+
</div>
71+
`,
72+
props: {
73+
placement: select("Tooltip direction", ["bottom", "top", "left", "right"], "bottom"),
74+
triggerText: text("Trigger text", "Tooltip label")
75+
}
76+
}))
77+
.add("only icon", () => ({
78+
template: `
79+
<div>
80+
<ng-template #template let-tooltip="tooltip">
81+
<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.
82+
If more room is needed please use a modal instead.</p>
83+
<div class="bx--tooltip__footer">
84+
<a href="/" class="bx--link">Learn More</a>
85+
<button class="bx--btn bx--btn--primary" (click)="tooltip.doClose()">Close</button>
86+
</div>
87+
</ng-template>
88+
89+
<span
90+
[ibmTooltip]="template"
91+
trigger="click"
92+
[placement]="placement">
93+
<div role="button" class="bx--tooltip__trigger">
94+
<svg focusable="false" aria-label="tooltip" width="16" height="16" viewBox="0 0 16 16" role="img" style="will-change: transform;">
95+
<circle cx="8" cy="3" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="8" cy="13" r="1"></circle>
96+
</svg>
97+
</div>
98+
</span>
99+
<ibm-placeholder></ibm-placeholder>
100+
</div>
101+
`,
102+
props: {
103+
placement: select("Tooltip direction", ["bottom", "top", "left", "right"], "bottom")
104+
}
105+
}))
106+
.add("Icon tooltip", () => ({
107+
template: `
108+
<ibm-tooltip-icon [placement]="placement" [content]="content">
109+
<svg width="16" height="12" viewBox="0 0 16 12">
110+
<g fill-rule="nonzero">
111+
<path d="M8.05 2a2.5 2.5 0 0 1 4.9 0H16v1h-3.05a2.5 2.5 0 0 1-4.9 0H0V2h8.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.05
112+
9a2.5 2.5 0 0 1 4.9 0H16v1H7.95a2.5 2.5 0 0 1-4.9 0H0V9h3.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
113+
</g>
114+
</svg>
115+
</ibm-tooltip-icon>
116+
`,
117+
props: {
118+
placement: select("Tooltip direction", ["bottom", "top"], "bottom"),
119+
content: text("Tooltip content", "Filter")
120+
}
121+
}))
122+
.add("Definition tooltip", () => ({
123+
template: `
124+
<ibm-tooltip-definition
125+
[content]="content"
126+
[placement]="placement">
127+
{{triggerText}}
128+
</ibm-tooltip-definition>
129+
`,
130+
props: {
131+
placement: select("Tooltip direction", ["bottom", "top"], "bottom"),
132+
triggerText: text("Tooltip text", "Definition Tooltip"),
133+
content: text("Tooltip content", "Brief description of the dotted, underlined word above.")
134+
}
49135
}));

0 commit comments

Comments
 (0)