File

src/toggletip/toggletip.component.ts

Description

Get started with importing the module:

Example :

import { ToggletipModule } from 'carbon-components-angular';

See demo

Extends

PopoverContainer

Implements

AfterViewInit OnDestroy

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
selector	`cds-toggletip, ibm-toggletip`
template	`<ng-content select="[cdsToggletipButton]"></ng-content> <cds-popover-content [attr.id]="id" aria-live="polite"> <ng-content select="[cdsToggletipContent]"></ng-content> </cds-popover-content>`

Index

Constructor

constructor(hostElement: ElementRef, ngZone: NgZone, renderer: Renderer2, changeDetectorRef: ChangeDetectorRef)

Defined in src/toggletip/toggletip.component.ts:49

Parameters :

Name	Type	Optional
hostElement	`ElementRef`	No
ngZone	`NgZone`	No
renderer	`Renderer2`	No
changeDetectorRef	`ChangeDetectorRef`	No

Inputs

id
Type : `string`
Default value : `tooltip-${Toggletip.toggletipCounter++}`
Defined in src/toggletip/toggletip.component.ts:41

isOpen
Type : `boolean`
Default value : `false`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:44`

align
Type : `oldPlacement \| Placement`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:45`
Set alignment of popover As of v5, `oldPlacements` are now deprecated in favor of Placements When `autoAlign` is set to `true`, alignment may change for best placement

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

Outputs

isOpenChange
Type : `EventEmitter`
Inherited from `PopoverContainer`
Defined in `PopoverContainer:98`
Emits an event when the state of `isOpen` changes. Allows `isOpen` to be double bound

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

HostBindings

class.cds--toggletip

Type : boolean

Default value : true

Defined in src/toggletip/toggletip.component.ts:43

class.cds--popover-container

Type : boolean

Default value : true

Inherited from PopoverContainer

Defined in PopoverContainer:116

HostListeners

keyup

Arguments : '$event'

keyup(event: KeyboardEvent)

Defined in src/toggletip/toggletip.component.ts:90

Methods

Private handleExpansion

handleExpansion(state, event: Event)

Defined in src/toggletip/toggletip.component.ts:107

Parameters :

Name	Type	Optional	Default value
state		No	`false`
event	`Event`	No

Returns : void

handleFocusOut

handleFocusOut(event)

Defined in src/toggletip/toggletip.component.ts:97

Parameters :

Name	Optional
event	No

Returns : void

hostkeys

hostkeys(event: KeyboardEvent)

Decorators :

@HostListener('keyup', ['$event'])

Defined in src/toggletip/toggletip.component.ts:90

Parameters :

Name	Type	Optional
event	`KeyboardEvent`	No

Returns : void

ngAfterViewInit

ngAfterViewInit()

Inherited from PopoverContainer

Defined in PopoverContainer:62

Returns : void

ngOnDestroy

ngOnDestroy()

Inherited from PopoverContainer

Defined in PopoverContainer:103

Returns : void

cleanUp

cleanUp()

Inherited from PopoverContainer

Defined in PopoverContainer:285

Clean up autoUpdate if auto alignment is enabled

Returns : void

handleChange

handleChange(open: boolean, event?: Event)

Inherited from PopoverContainer

Defined in PopoverContainer:137

Handles emitting open/close event

Parameters :

Name	Type	Optional	Description
open	`boolean`	No	Is the popover container open
event	`Event`	Yes	Event

Returns : void

initializeReferences

initializeReferences()

Inherited from PopoverContainer

Defined in PopoverContainer:264

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 :

Name	Type	Optional
changes	`SimpleChanges`	No

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 :

Name	Optional
value	No

Returns : number

updateAlignmentClass

updateAlignmentClass(newAlignment: string, previousAlignment?: string)

Inherited from PopoverContainer

Defined in PopoverContainer:296

Replace existing previous alignment class with new

Parameters :

Name	Type	Optional
newAlignment	`string`	No
previousAlignment	`string`	Yes

Returns : void

Properties

btn

Type : ElementRef

Decorators :


                            @ContentChild(ToggletipButton, {read: ElementRef})

Defined in src/toggletip/toggletip.component.ts:46

documentClick

Default value : this.handleFocusOut.bind(this)

Defined in src/toggletip/toggletip.component.ts:48

Private subscription

Type : Subscription

Defined in src/toggletip/toggletip.component.ts:49

toggletipClass

Default value : true

Decorators :


                            @HostBinding('class.cds--toggletip')

Defined in src/toggletip/toggletip.component.ts:43

Static toggletipCounter

Type : number

Default value : 0

Defined in src/toggletip/toggletip.component.ts:39

_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 {
	AfterViewInit,
	ChangeDetectionStrategy,
	ChangeDetectorRef,
	Component,
	ContentChild,
	ElementRef,
	HostBinding,
	HostListener,
	Input,
	NgZone,
	OnDestroy,
	Renderer2
} from "@angular/core";
import { fromEvent, Subscription } from "rxjs";
import { PopoverContainer } from "carbon-components-angular/popover";
import { ToggletipButton } from "./toggletip-button.directive";

/**
 * Get started with importing the module:
 *
 * ```typescript
 * import { ToggletipModule } from 'carbon-components-angular';
 * ```
 *
 * [See demo](../../?path=/story/components-toggletip--basic)
 */
@Component({
	selector: "cds-toggletip, ibm-toggletip",
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<ng-content select="[cdsToggletipButton]"></ng-content>
		<cds-popover-content [attr.id]="id" aria-live="polite">
			<ng-content select="[cdsToggletipContent]"></ng-content>
		</cds-popover-content>
	`
})
export class Toggletip extends PopoverContainer implements AfterViewInit, OnDestroy {
	static toggletipCounter = 0;

	@Input() id = `tooltip-${Toggletip.toggletipCounter++}`;

	@HostBinding("class.cds--toggletip") toggletipClass = true;
	@HostBinding("class.cds--toggletip--open") @Input() isOpen = false;

	@ContentChild(ToggletipButton, { read: ElementRef }) btn!: ElementRef;

	documentClick = this.handleFocusOut.bind(this);
	private subscription: Subscription;

	constructor(
		protected hostElement: ElementRef,
		protected ngZone: NgZone,
		protected renderer: Renderer2,
		protected changeDetectorRef: ChangeDetectorRef
	) {
		super(hostElement, ngZone, renderer, changeDetectorRef);
		this.highContrast = true;
		this.dropShadow = false;
	}

	ngAfterViewInit(): void {
		this.initializeReferences();

		// Listen for click events on trigger
		this.subscription = fromEvent(this.btn.nativeElement, "click")
			.subscribe((event: Event) => {
				// Add/Remove event listener based on isOpen to improve performance when there
				// are a lot of toggletips
				if (this.isOpen) {
					document.removeEventListener("click", this.documentClick);
				} else {
					document.addEventListener("click", this.documentClick);
				}

				this.handleExpansion(!this.isOpen, event);
			});

		// Toggletip is open on initial render, add 'click' event listener to document so users can close
		if (this.isOpen) {
			document.addEventListener("click", this.documentClick);
		}

		if (this.btn) {
			this.renderer.setAttribute(this.btn.nativeElement, "aria-controls", this.id);
		}
	}

	@HostListener("keyup", ["$event"])
	hostkeys(event: KeyboardEvent) {
		if (open && event.key === "Escape") {
			event.stopPropagation();
			this.handleExpansion(false, event);
		}
	}

	handleFocusOut(event) {
		if (!this.hostElement.nativeElement.contains(event.target)) {
			this.handleExpansion(false, event);
		}
	}

	ngOnDestroy(): void {
		this.subscription.unsubscribe();
	}

	private handleExpansion(state = false, event: Event) {
		this.handleChange(state, event);
		if (this.btn) {
			this.renderer.setAttribute(this.btn.nativeElement, "aria-expanded", this.isOpen.toString());
		}
	}
}

Legend

Html element

Component

Html element with directive

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

HostListeners

Constructor

Inputs

Outputs

HostBindings

HostListeners

Methods

Properties

results matching ""

No results matching ""