src/tooltip/definition-tooptip.component.ts
Get started with importing the module:
Example :import { TooltipModule } from 'carbon-components-angular';
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cds-tooltip-definition, ibm-tooltip-definition |
| template | |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
constructor(elementRef: ElementRef, ngZone: NgZone, renderer: Renderer2, changeDetectorRef: ChangeDetectorRef)
|
|||||||||||||||
|
Parameters :
|
| description | |
Type : string | TemplateRef<any>
|
|
|
The string or template content to be exposed by the tooltip. |
|
| id | |
Type : string
|
|
Default value : `tooltip-definition-${TooltipDefinition.tooltipCount++}`
|
|
| openOnHover | |
Type : boolean
|
|
Default value : false
|
|
| templateContext | |
Type : any
|
|
|
Optional data for templates passed as implicit context |
|
| align | |
Type : oldPlacement | Placement
|
|
|
Inherited from
PopoverContainer
|
|
|
Defined in
PopoverContainer:45
|
|
|
Set alignment of popover
As of v5, When |
|
| autoAlign | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
PopoverContainer
|
|
|
Defined in
PopoverContainer:115
|
|
|
Experimental: Use floating-ui to position the tooltip This is not toggleable - should be assigned once |
|
| caret | |
Type : boolean
|
|
Default value : true
|
|
|
Inherited from
PopoverContainer
|
|
|
Defined in
PopoverContainer:102
|
|
|
Show caret at the alignment position |
|
| dropShadow | |
Type : boolean
|
|
Default value : true
|
|
|
Inherited from
PopoverContainer
|
|
|
Defined in
PopoverContainer:106
|
|
|
Enable drop shadow around the popover container |
|
| highContrast | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
PopoverContainer
|
|
|
Defined in
PopoverContainer:110
|
|
|
Enable high contrast for popover container |
|
| isOpen | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
PopoverContainer
|
|
|
Defined in
PopoverContainer:117
|
|
| isOpenChange | |
Type : EventEmitter
|
|
|
Inherited from
PopoverContainer
|
|
|
Defined in
PopoverContainer:98
|
|
|
Emits an event when the state of |
|
| onClose | |
Type : EventEmitter<Event>
|
|
|
Inherited from
PopoverContainer
|
|
|
Defined in
PopoverContainer:90
|
|
|
Emits an event when the dialog is closed |
|
| onOpen | |
Type : EventEmitter<Event>
|
|
|
Inherited from
PopoverContainer
|
|
|
Defined in
PopoverContainer:94
|
|
|
Emits an event when the dialog is opened |
|
| class.cds--popover-container |
Type : boolean
|
Default value : true
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:116
|
| focusin |
Arguments : '$event'
|
focusin(event)
|
| keyup |
Arguments : '$event'
|
keyup(event: KeyboardEvent)
|
| mouseenter |
Arguments : '$event'
|
mouseenter(event)
|
| mouseleave |
Arguments : '$event'
|
mouseleave(event)
|
| hostkeys | ||||||
hostkeys(event: KeyboardEvent)
|
||||||
Decorators :
@HostListener('keyup', ['$event'])
|
||||||
|
Parameters :
Returns :
void
|
| Public isTemplate | ||||
isTemplate(value)
|
||||
|
Parameters :
Returns :
boolean
|
| mouseenter | ||||
mouseenter(event)
|
||||
Decorators :
@HostListener('mouseenter', ['$event'])
|
||||
|
Parameters :
Returns :
void
|
| mouseleave | ||||
mouseleave(event)
|
||||
Decorators :
@HostListener('mouseleave', ['$event'])
|
||||
|
Parameters :
Returns :
void
|
| onBlur | ||||||
onBlur(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onClick | ||||||
onClick(event: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onFocus | ||||
onFocus(event)
|
||||
Decorators :
@HostListener('focusin', ['$event'])
|
||||
|
Parameters :
Returns :
void
|
| cleanUp |
cleanUp()
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:285
|
|
Clean up
Returns :
void
|
| handleChange | ||||||||||||
handleChange(open: boolean, event?: Event)
|
||||||||||||
|
Inherited from
PopoverContainer
|
||||||||||||
|
Defined in
PopoverContainer:137
|
||||||||||||
|
Handles emitting open/close event
Parameters :
Returns :
void
|
| initializeReferences |
initializeReferences()
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:264
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:260
|
|
Handle initialization of element
Returns :
void
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Inherited from
PopoverContainer
|
||||||
|
Defined in
PopoverContainer:241
|
||||||
|
Close the popover and reopen it with updated values without emitting an event
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:278
|
|
Clean up
Returns :
void
|
| recomputePosition |
recomputePosition()
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:185
|
|
Compute position of tooltip when autoAlign is enabled
Returns :
void
|
| roundByDPR | ||||
roundByDPR(value)
|
||||
|
Inherited from
PopoverContainer
|
||||
|
Defined in
PopoverContainer:177
|
||||
|
Parameters :
Returns :
number
|
| updateAlignmentClass |
updateAlignmentClass(newAlignment: string, previousAlignment?: string)
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:296
|
|
Replace existing previous alignment class with new
Returns :
void
|
| Static tooltipCount |
Type : number
|
Default value : 0
|
| _align |
Type : Placement
|
Default value : "bottom"
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:84
|
| Readonly alignmentClassPrefix |
Type : string
|
Default value : "cds--popover--"
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:85
|
| Protected caretHeight |
Type : number
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:122
|
| Protected caretOffset |
Type : number
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:121
|
| Protected caretRef |
Type : HTMLElement
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:120
|
| containerClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--popover-container')
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:116
|
| Protected popoverContentRef |
Type : HTMLElement
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:119
|
| Protected unmountFloatingElement |
Type : Function
|
|
Inherited from
PopoverContainer
|
|
Defined in
PopoverContainer:123
|
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
Input,
NgZone,
Renderer2,
TemplateRef
} from "@angular/core";
import { PopoverContainer } from "carbon-components-angular/popover";
/**
* Get started with importing the module:
*
* ```typescript
* import { TooltipModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-tooltip-definition--basic)
*/
@Component({
selector: "cds-tooltip-definition, ibm-tooltip-definition",
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<button
class="cds--definition-term"
[attr.aria-controls]="id"
[attr.aria-expanded]="isOpen"
[attr.aria-describedby]="isOpen ? id : null"
(blur)="onBlur($event)"
(click)="onClick($event)"
type="button">
<ng-content></ng-content>
</button>
<span
*ngIf="description"
class="cds--popover"
[id]="id"
[attr.aria-hidden]="!isOpen"
role="tooltip">
<span class="cds--popover-content cds--definition-tooltip" aria-live="polite">
<ng-container *ngIf="!isTemplate(description)">{{description}}</ng-container>
<ng-template *ngIf="isTemplate(description)" [ngTemplateOutlet]="description" [ngTemplateOutletContext]="{ $implicit: templateContext }"></ng-template>
<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>
</span>
<span *ngIf="!autoAlign" class="cds--popover-caret"></span>
</span>
`
})
export class TooltipDefinition extends PopoverContainer {
static tooltipCount = 0;
@Input() id = `tooltip-definition-${TooltipDefinition.tooltipCount++}`;
/**
* The string or template content to be exposed by the tooltip.
*/
@Input() description: string | TemplateRef<any>;
/**
* Optional data for templates passed as implicit context
*/
@Input() templateContext: any;
@Input() openOnHover = false;
constructor(
protected elementRef: ElementRef,
protected ngZone: NgZone,
protected renderer: Renderer2,
protected changeDetectorRef: ChangeDetectorRef
) {
super(elementRef, ngZone, renderer, changeDetectorRef);
this.highContrast = true;
this.dropShadow = false;
}
onBlur(event: Event) {
this.handleChange(false, event);
}
onClick(event: Event) {
this.handleChange(!this.isOpen, event);
}
@HostListener("keyup", ["$event"])
hostkeys(event: KeyboardEvent) {
if (this.isOpen && event.key === "Escape") {
event.stopPropagation();
this.handleChange(false, event);
}
}
@HostListener("mouseleave", ["$event"])
mouseleave(event) {
this.handleChange(false, event);
}
@HostListener("mouseenter", ["$event"])
mouseenter(event) {
if (this.openOnHover) {
this.handleChange(true, event);
}
}
@HostListener("focusin", ["$event"])
onFocus(event) {
this.handleChange(true, event);
}
public isTemplate(value) {
return value instanceof TemplateRef;
}
}