Skip to content

Commit 7301b0e

Browse files
RivaIvanovaRivaIvanova
committed
docs(tooltip): add changes to tooltip readme
1 parent 7e3ecf0 commit 7301b0e

File tree

2 files changed

+85
-68
lines changed

2 files changed

+85
-68
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -16,74 +16,7 @@ All notable changes for each version of this project will be documented in this
1616
- `IgxTooltip`
1717
- The tooltip now remains open while interacting with it.
1818
- `IgxTooltipTarget`
19-
- Introduced a new `positionSettings` input property. Controls the position and animation settings used by the tooltip.
20-
- Introduced a new `sticky` input property. When set to `true`, the tooltip renders a default close icon `x`. The tooltip remains visible until the user closes it via the close icon `x` or `Esc` key. Defaults to `false`.
21-
- Introduced a new `closeButtonTemplate` input property that allows templating the default close icon `x`.
22-
```html
23-
<igx-icon [igxTooltipTarget]="tooltipRef" [closeButtonTemplate]="customClose">info</igx-icon>
24-
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
25-
26-
<ng-template #customClose>
27-
<button igxButton>Close</button>
28-
</ng-template>
29-
```
30-
31-
- Introduced a new `hasArrow` input property. Controls whether to display an arrow indicator for the tooltip. Defaults to `false`.
32-
33-
_Note:_ The tooltip uses the `TooltipPositionStrategy` to position the tooltip and arrow element. If a custom position strategy is used (`overlaySettings.positionStrategy`) and `hasArrow` is set to `true`, the custom strategy should extend the `TooltipPositionStrategy`. Otherwise, the arrow will not be displayed.
34-
35-
_Note:_ The arrow element is positioned based on the provided position settings. If the directions and starting points do not correspond to any of the predefined position values, the arrow is positioned in the top middle side of the tooltip (default tooltip position `bottom`).
36-
37-
38-
| Position     | Horizontal Direction          | Horizontal Start Point         | Vertical Direction            | Vertical Start Point           |
39-
|--------------|-------------------------------|--------------------------------|-------------------------------|--------------------------------|
40-
| top          | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Top         | VerticalAlignment.Top          |
41-
| top-start    | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Top          |
42-
| top-end      | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Top          |
43-
| bottom       | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
44-
| bottom-start | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
45-
| bottom-end   | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
46-
| right        | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Middle      | VerticalAlignment.Middle       |
47-
| right-start  | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Top          |
48-
| right-end    | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Bottom       |
49-
| left         | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Middle      | VerticalAlignment.Middle       |
50-
| left-start   | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Top          |
51-
| left-end     | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Bottom       |
52-
53-
54-
The arrow's position can be customized by overriding the `positionArrow(arrow: HTMLElement, arrowFit: ArrowFit)` method.
55-
56-
For example:
57-
58-
```ts
59-
export class CustomStrategy extends TooltipPositioningStrategy {
60-
constructor(settings?: PositionSettings) {
61-
super(settings);
62-
}
63-
64-
public override positionArrow(arrow: HTMLElement, arrowFit: ArrowFit): void {
65-
Object.assign(arrow.style, {
66-
left: '-0.25rem',
67-
transform: 'rotate(-45deg)',
68-
[arrowFit.direction]: '-0.25rem',
69-
});
70-
}
71-
}
72-
73-
public overlaySettings: OverlaySettings = {
74-
positionStrategy: new CustomStrategy({
75-
horizontalDirection: HorizontalAlignment.Right,
76-
horizontalStartPoint: HorizontalAlignment.Right,
77-
verticalDirection: VerticalAlignment.Bottom,
78-
verticalStartPoint: VerticalAlignment.Bottom,
79-
})
80-
};
81-
```
82-
83-
```html
84-
<igx-icon [igxTooltipTarget]="tooltipRef" [hasArrow]="true" [overlaySettings]="overlaySettings">info</igx-icon>
85-
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
86-
```
19+
- Introduced several new properties to enhance customization of tooltip content and behavior. Those include `positionSettings`, `hasArrow`, `sticky`, `closeButtonTemplate`. For detailed usage and examples, please refer to the Tooltip [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/tooltip/README.md).
8720

8821
### General
8922
- `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.

‎projects/igniteui-angular/src/lib/directives/tooltip/README.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,26 @@ Since the **IgxTooltip** directive extends the **IgxToggle** directive and there
100100
| tooltipDisabled | boolean | Specifies if the tooltip should not show when hovering its target with the mouse. (defaults to false) |
101101
| tooltipHidden | boolean | Indicates if the tooltip is currently hidden. |
102102
| nativeElement | any | Reference to the native element of the directive. |
103+
| positionSettings | PositionSettings | Controls the position and animation settings used by the tooltip. |
104+
| hasArrow | boolean | Controls whether to display an arrow indicator for the tooltip. Defaults to `false`. |
105+
| sticky | boolean | When set to `true`, the tooltip renders a default close icon `x`. The tooltip remains visible until the user closes it via the close icon `x` or `Esc` key. Defaults to `false`. |
106+
| closeButtonTemplate | TemplateRef<any> | Allows templating the default close icon `x`. |
107+
108+
#### Templating the close button
109+
110+
```html
111+
<igx-icon [igxTooltipTarget]="tooltipRef" [closeButtonTemplate]="customClose">
112+
info
113+
</igx-icon>
114+
115+
<span #tooltipRef="tooltip" igxTooltip>
116+
Hello there, I am a tooltip!
117+
</span>
118+
119+
<ng-template #customClose>
120+
<button igxButton>Close</button>
121+
</ng-template>
122+
```
103123

104124
### Methods
105125
| Name | Type | Arguments | Description |
@@ -112,3 +132,67 @@ Since the **IgxTooltip** directive extends the **IgxToggle** directive and there
112132
|--|--|--|--|
113133
| tooltipShow | Emitted when the tooltip starts showing. (This event is fired before the start of the countdown to showing the tooltip.) | True | ITooltipShowEventArgs |
114134
| tooltipHide | Emitted when the tooltip starts hiding. (This event is fired before the start of the countdown to hiding the tooltip.) | True | ITooltipHideEventArgs |
135+
136+
### Notes
137+
138+
The `IgxTooltipTarget` uses the `TooltipPositionStrategy` to position the tooltip and arrow element. If a custom position strategy is used (`overlaySettings.positionStrategy`) and `hasArrow` is set to `true`, the custom strategy should extend the `TooltipPositionStrategy`. Otherwise, the arrow will not be displayed.
139+
140+
The arrow element is positioned based on the provided position settings. If the directions and starting points do not correspond to any of the predefined position values, the arrow is positioned in the top middle side of the tooltip (default tooltip position `bottom`).
141+
142+
143+
| Position     | Horizontal Direction          | Horizontal Start Point         | Vertical Direction            | Vertical Start Point           |
144+
|--------------|-------------------------------|--------------------------------|-------------------------------|--------------------------------|
145+
| top          | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Top         | VerticalAlignment.Top          |
146+
| top-start    | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Top          |
147+
| top-end      | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Top          |
148+
| bottom       | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
149+
| bottom-start | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
150+
| bottom-end   | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
151+
| right        | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Middle      | VerticalAlignment.Middle       |
152+
| right-start  | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Top          |
153+
| right-end    | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Bottom       |
154+
| left         | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Middle      | VerticalAlignment.Middle       |
155+
| left-start   | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Top          |
156+
| left-end     | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Bottom       |
157+
158+
159+
#### Customizing the arrow's position
160+
161+
The arrow's position can be customized by overriding the `positionArrow(arrow: HTMLElement, arrowFit: ArrowFit)` method.
162+
163+
For example:
164+
165+
```ts
166+
export class CustomStrategy extends TooltipPositioningStrategy {
167+
constructor(settings?: PositionSettings) {
168+
super(settings);
169+
}
170+
171+
public override positionArrow(arrow: HTMLElement, arrowFit: ArrowFit): void {
172+
Object.assign(arrow.style, {
173+
left: '-0.25rem',
174+
transform: 'rotate(-45deg)',
175+
[arrowFit.direction]: '-0.25rem',
176+
});
177+
}
178+
}
179+
180+
public overlaySettings: OverlaySettings = {
181+
positionStrategy: new CustomStrategy({
182+
horizontalDirection: HorizontalAlignment.Right,
183+
horizontalStartPoint: HorizontalAlignment.Right,
184+
verticalDirection: VerticalAlignment.Bottom,
185+
verticalStartPoint: VerticalAlignment.Bottom,
186+
})
187+
};
188+
```
189+
190+
```html
191+
<igx-icon [igxTooltipTarget]="tooltipRef" [hasArrow]="true" [overlaySettings]="overlaySettings">
192+
info
193+
</igx-icon>
194+
195+
<span #tooltipRef="tooltip" igxTooltip>
196+
Hello there, I am a tooltip!
197+
</span>
198+
```

0 commit comments

Comments
 (0)