File

src/dialog/tooltip/tooltip.component.ts

Description

Extend the Dialog component to create a tooltip for exposing content.

Extends

Dialog

Metadata

selector ibm-tooltip

template

<div
	#dialog
	[id]="dialogConfig.compID"
	[attr.role]="role"
	[attr.data-floating-menu-direction]="placement"
	class="bx--tooltip bx--tooltip--shown">
	<span class="bx--tooltip__caret" aria-hidden="true"></span>
	<ng-template
			*ngIf="hasContentTemplate"
			[ngTemplateOutlet]="dialogConfig.content"
			[ngTemplateOutletContext]="{tooltip: this}">
	</ng-template>
	<p
		*ngIf="!hasContentTemplate">
		{{dialogConfig.content}}
	</p>
</div>

Index

Outputs

HostBindings

style.display

HostListeners

document:click
keydown

Constructor

constructor(elementRef: ElementRef, elementService: ElementService)

Defined in src/dialog/tooltip/tooltip.component.ts:49

Parameters :

Name	Type	Optional
elementRef	`ElementRef`	No
elementService	`ElementService`	No

Inputs

`dialogConfig`	Receives `DialogConfig` interface object with properties of `Dialog` explicitly defined. Type : `DialogConfig`
Inherited from `Dialog`
Defined in Dialog:48

Outputs

`close`	Emits event that handles the closing of a `Dialog` object. `$event` Type: `EventEmitter<any>`
Inherited from `Dialog`
Defined in Dialog:43

HostBindings

style.display

style.display:

Default value : "inline-block"

Defined in src/dialog/tooltip/tooltip.component.ts:40

HostListeners

document:click

Arguments : '$event'

document:click(event)

Inherited from Dialog

Defined in Dialog:261

Sets up a event Listener to close Dialog if click event occurs outside Dialog object.

keydown

Arguments : '$event'

keydown(event: KeyboardEvent)

Inherited from Dialog

Defined in Dialog:240

Sets up a KeyboardEvent to close Dialog with Escape key.

Methods

afterDialogViewInit

afterDialogViewInit()

Defined in src/dialog/tooltip/tooltip.component.ts:78

Returns : void

onDialogInit

onDialogInit()

Defined in src/dialog/tooltip/tooltip.component.ts:61

Check whether there is a template for the Tooltip content.

Returns : void

afterDialogViewInit

afterDialogViewInit()

Inherited from Dialog

Defined in Dialog:191

Empty method to be overridden by consuming classes to run any additional initialization code after the view is available. NOTE: this does not guarantee the dialog will be positioned, simply that it will exist in the DOM

Returns : void

Public doClose

doClose()

Inherited from Dialog

Defined in Dialog:271

Closes Dialog object by emitting the close event upwards to parents.

Returns : void

ngAfterViewInit

ngAfterViewInit()

Inherited from Dialog

Defined in Dialog:124

After the DOM is ready, focus is set and dialog is placed in respect to the parent element.

Returns : void

ngOnDestroy

ngOnDestroy()

Inherited from Dialog

Defined in Dialog:278

At destruction of component, Dialog unsubscribes from all the subscriptions.

Returns : void

ngOnInit

ngOnInit()

Inherited from Dialog

Defined in Dialog:107

Initialize the Dialog, set the placement and gap, and add a Subscription to resize events.

Returns : void

onDialogInit

onDialogInit()

Inherited from Dialog

Defined in Dialog:185

Empty method to be overridden by consuming classes to run any additional initialization code.

Returns : void

placeDialog

placeDialog()

Inherited from Dialog

Defined in Dialog:196

Uses the position service to position the Dialog in screen space

Returns : void

Properties

Public hasContentTemplate

hasContentTemplate:

Default value : false

Defined in src/dialog/tooltip/tooltip.component.ts:44

Value is set to true if the Tooltip is to display a TemplateRef instead of a string.

Public role

role:     string

Type : string

Default value : "tooltip"

Defined in src/dialog/tooltip/tooltip.component.ts:49

Sets the role of the tooltip. If there's no focusable content we leave it as a tooltip, if there is focusable content we switch to the interactive dialog role.

Protected addGap

addGap:     object

Type : object

Default value :

{
		"left": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),
		"right": pos => position.addOffset(pos, 0, this.dialogConfig.gap),
		"top": pos => position.addOffset(pos, -this.dialogConfig.gap),
		"bottom": pos => position.addOffset(pos, this.dialogConfig.gap),
		"left-bottom": pos => position.addOffset(pos, 0, -this.dialogConfig.gap),
		"right-bottom": pos => position.addOffset(pos, 0, this.dialogConfig.gap)
	}

Inherited from Dialog

Defined in Dialog:80

Handles offsetting the Dialog item based on the defined position to not obscure the content beneath.

Public data

data:     object

Type : object

Default value : {}

Inherited from Dialog

Defined in Dialog:57

Stores the data received from dialogConfig.

dialog

dialog:     ElementRef

Type : ElementRef

Decorators :


                                @ViewChild('dialog')

Inherited from Dialog

Defined in Dialog:52

Maintains a reference to the view DOM element of the Dialog.

Public placement

placement:     string

Type : string

Inherited from Dialog

Defined in Dialog:62

The placement of the Dialog is received from the Position service.

Protected placements

placements:     Positions

Type : Positions

Default value : {}

Inherited from Dialog

Defined in Dialog:92

Extra placements. Child classes can add to this for use in placeDialog.

Protected Static resizeObservable

resizeObservable:     Observable<any>

Type : Observable<any>

Default value : fromEvent(window, "resize", { passive: true }).pipe(throttleTime(100))

Inherited from Dialog

Defined in Dialog:39

One static event observable to handle window resizing.

Protected resizeSubscription

resizeSubscription:

Default value : new Subscription()

Inherited from Dialog

Defined in Dialog:67

Subscription used to update placement in the event of a window resize.

Protected scrollSubscription

scrollSubscription:

Default value : new Subscription()

Inherited from Dialog

Defined in Dialog:73

Subscription to all the scrollable parents scroll event

Protected visibilitySubscription

visibilitySubscription:

Default value : new Subscription()

Inherited from Dialog

Defined in Dialog:75

import {
	Component,
	TemplateRef,
	HostBinding,
	ElementRef,
	Optional
} from "@angular/core";
import { getFocusElementList } from "./../../common/tab.service";

import { Dialog } from "./../dialog.component";
import { position } from "@carbon/utils-position";
import { ElementService } from "./../../utils/utils.module";

/**
 * Extend the `Dialog` component to create a tooltip for exposing content.
 */
@Component({
	selector: "ibm-tooltip",
	template: `
		<div
			#dialog
			[id]="dialogConfig.compID"
			[attr.role]="role"
			[attr.data-floating-menu-direction]="placement"
			class="bx--tooltip bx--tooltip--shown">
			<span class="bx--tooltip__caret" aria-hidden="true"></span>
			<ng-template
					*ngIf="hasContentTemplate"
					[ngTemplateOutlet]="dialogConfig.content"
					[ngTemplateOutletContext]="{tooltip: this}">
			</ng-template>
			<p
				*ngIf="!hasContentTemplate">
				{{dialogConfig.content}}
			</p>
		</div>
		`
})
export class Tooltip extends Dialog {
	@HostBinding("style.display") style = "inline-block";
	/**
	 * Value is set to `true` if the `Tooltip` is to display a `TemplateRef` instead of a string.
	 */
	public hasContentTemplate = false;
	/**
	 * Sets the role of the tooltip. If there's no focusable content we leave it as a `tooltip`,
	 * if there _is_ focusable content we switch to the interactive `dialog` role.
	 */
	public role = "tooltip";

	constructor(
		protected elementRef: ElementRef,
		// mark `elementService` as optional since making it mandatory would be a breaking change
		@Optional() protected elementService: ElementService = null) {
		super(elementRef, elementService);
	}

	/**
	 * Check whether there is a template for the `Tooltip` content.
	 */
	onDialogInit() {
		this.addGap["bottom"] = pos => {
			return position.addOffset(pos, 3, 0);
		};
		this.addGap["top"] = pos => {
			return position.addOffset(pos, -10, 0);
		};
		this.addGap["left"] = pos => {
			return position.addOffset(pos, -3, -6);
		};
		this.addGap["right"] = pos => {
			return position.addOffset(pos, -3, 6);
		};

		this.hasContentTemplate = this.dialogConfig.content instanceof TemplateRef;
	}

	afterDialogViewInit() {
		const focusableElements = getFocusElementList(this.dialog.nativeElement);
		if (focusableElements.length > 0) {
			this.role = "dialog";
			focusableElements[0].focus();
		}
	}
}

Legend

Html element

Component

Html element with directive

File

Description

Extends

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

HostListeners

Constructor

Inputs

Outputs

HostBindings

HostListeners

Methods

Properties

result-matching ""

No results matching ""