Skip to content

Commit e4d3022

Browse files
committed
docs(tooltip): update changelog and hasArrow description
1 parent 44270f8 commit e4d3022

File tree

2 files changed

+38
-3
lines changed

2 files changed

+38
-3
lines changed

CHANGELOG.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,41 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 20.0.0
6+
### General
7+
- `IgxTooltipTarget`
8+
- **Behavioral Changes**
9+
- The `showDelay` input property now defaults to `200`.
10+
- The `hideDelay` input property now defaults to `300`.
11+
- The `showTooltip` and `hideTooltip` methods do not take `showDelay`/`hideDelay` into account.
12+
13+
### New Features
14+
- `IgxTooltip`
15+
- The tooltip now remains open while interacting with it.
16+
- `IgxTooltipTarget`
17+
- Introduced a new `hasArrow` input property. Controls whether to display an arrow indicator for the tooltip. Defaults to `false`.
18+
- 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`.
19+
- Introduced a new `closeButtonTemplate` input property that allows templating the default close icon `x`.
20+
```html
21+
<igx-icon [igxTooltipTarget]="tooltipRef" [closeButtonTemplate]="customClose">info</igx-icon>
22+
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
23+
24+
<ng-template #customClose>
25+
<button igxButton>Close</button>
26+
</ng-template>
27+
```
28+
29+
- Introduced a new `placement` input property of type `TooltipPlacement`. Controls where to place the tooltip relative to the target element. Default value is `bottom`. Supported values are `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`.
30+
31+
_Note:_ Positioning the arrow is based on the `placement` property. If `hasArrow` is set to `true`, changing the `placement` property will change the arrow position as well.
32+
```html
33+
<igx-icon [igxTooltipTarget]="tooltipRef" [placement]="'top-start'">info</igx-icon>
34+
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
35+
```
36+
- Introduced a new `offset` input property. Controls the offset of the tooltip from the target in pixels. Default value is 6.
37+
38+
_Note:_ If a custom `positionStrategy` is used, the `placement` and `offset` properties (if set) will not be taken into account and the arrow (if enabled) will not be displayed.
39+
540
## 19.2.0
641

742
### General

projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
119119
}
120120

121121
/**
122-
* Controls whether the arrow element of the tooltip is rendered.
123-
* Set to true to hide the arrow. Default value is `false`.
122+
* Controls whether to display an arrow indicator for the tooltip.
123+
* Set to true to show the arrow. Default value is `false`.
124124
*
125125
* ```typescript
126126
* // get
@@ -129,7 +129,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
129129
*
130130
* ```typescript
131131
* // set
132-
* this.tooltip.hasArrow = false;
132+
* this.tooltip.hasArrow = true;
133133
* ```
134134
*
135135
* ```html

0 commit comments

Comments
 (0)