### 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

###### Properties

- Public hasContentTemplate
- Public role
- Protected addGap
- Public data
- dialog
- Public placement
- Protected placements
- Protected Static resizeObservable
- Protected resizeSubscription
- Protected scrollSubscription

###### Methods

- afterDialogViewInit
- onDialogInit
- afterDialogViewInit
- Public doClose
- ngAfterViewInit
- ngOnDestroy
- ngOnInit
- onDialogInit
- placeDialog

###### Inputs

- dialogConfig

###### Outputs

- close

###### HostBindings

- style.display

###### HostListeners

- document:click
- keydown

### Inputs

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

### Outputs

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

### HostBindings

style.display
`style.display: ```
Default value : `"inline-block"`
Defined in src/dialog/tooltip/tooltip.component.ts:38

### HostListeners

document:click
Arguments : `'$event'`
`document:click(event)`
Inherited from `Dialog`
Defined in Dialog:262
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:241
Sets up a KeyboardEvent to close `Dialog` with Escape key.

### Methods

afterDialogViewInit
`afterDialogViewInit()`
Defined in src/dialog/tooltip/tooltip.component.ts:68
Returns : `void`

onDialogInit
`onDialogInit()`
Defined in src/dialog/tooltip/tooltip.component.ts:51
Check whether there is a template for the `Tooltip` content. Returns : `void`

afterDialogViewInit
`afterDialogViewInit()`
Inherited from `Dialog`
Defined in Dialog:199
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:272
Closes `Dialog` object by emitting the close event upwards to parents. Returns : `void`

ngAfterViewInit
`ngAfterViewInit()`
Inherited from `Dialog`
Defined in Dialog:122
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:279
At destruction of component, `Dialog` unsubscribes from handling window resizing changes. Returns : `void`

ngOnInit
`ngOnInit()`
Inherited from `Dialog`
Defined in Dialog:106
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:193
Empty method to be overridden by consuming classes to run any additional initialization code. Returns : `void`

placeDialog
`placeDialog()`
Inherited from `Dialog`
Defined in Dialog:204
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:42
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:47
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:83
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:62
Stores the data received from `dialogConfig`.

dialog
`dialog: `ElementRef``
Type : `ElementRef`
Decorators : `@ViewChild('dialog')`
Inherited from `Dialog`
Defined in Dialog:57
Maintains a reference to the view DOM element of the `Dialog`.

Public placement
`placement: `string``
Type : `string`
Inherited from `Dialog`
Defined in Dialog:67
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:95
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").pipe(throttleTime(100))`
Inherited from `Dialog`
Defined in Dialog:44
One static event observable to handle window resizing.

Protected resizeSubscription
`resizeSubscription: `Subscription``
Type : `Subscription`
Inherited from `Dialog`
Defined in Dialog:72
`Subscription` used to update placement in the event of a window resize.

Protected scrollSubscription
`scrollSubscription: `Subscription``
Type : `Subscription`
Default value : `new Subscription()`
Inherited from `Dialog`
Defined in Dialog:78
Subscription to all the scrollable parents `scroll` event

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

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

    /**
     * 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";
    	/**
    	 * 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

# result-matching ""

# No results matching ""