### 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 Protected visibilitySubscription
###### Methods
afterDialogViewInit onDialogInit afterDialogViewInit Public doClose ngAfterViewInit ngOnDestroy ngOnInit onDialogInit placeDialog
###### Inputs
dialogConfig
###### Outputs
close
###### 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:254
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:233
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:264
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:271
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").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

# result-matching ""

# No results matching ""