### File

`src/dialog/tooltip/tooltip.directive.ts`

### Description

Directive for extending `Dialog` to create tooltips.

See demo

class: TooltipDirective (extends PopoverDirective)

selector: `nTooltip`

     * <button nTooltip="I am a tooltip" placement="right" trigger="mouseenter" type="danger">Tooltip Right</button>
     * <button nTooltip="I am a tooltip" type="warning">Tooltip Top warning on click</button>
     *

../../iframe.html?id=tooltip--basic

### Example

### Metadata

Providers | `DialogService`
Selector | `[ibmTooltip]`

### Index

###### Methods

- onDialogInit

###### Inputs

- ibmTooltip
- tooltip-type

###### HostBindings

- attr.aria-describedby
- class.bx--tooltip__trigger
- tabindex

### Constructor

`constructor(elementRef: ElementRef, viewContainerRef: ViewContainerRef, dialogService: DialogService)`
Defined in src/dialog/tooltip/tooltip.directive.ts:62

Creates an instance of `TooltipDirective`.

Parameters :

Name | Type | Optional
elementRef | `ElementRef` | No
viewContainerRef | `ViewContainerRef` | No
dialogService | `DialogService` | No

### Inputs

`ibmTooltip` | The string or template content to be exposed by the tooltip. Type : `string | TemplateRef<any>`
Defined in src/dialog/tooltip/tooltip.directive.ts:49

`tooltip-type` | Set tooltip type to reflect 'warning' or 'error' styles. Type : `"warning" | "error" | ""` Default value : `""`
Defined in src/dialog/tooltip/tooltip.directive.ts:54

### HostBindings

attr.aria-describedby
`attr.aria-describedby: `string``
Type : `string`
Defined in src/dialog/tooltip/tooltip.directive.ts:60

class.bx--tooltip__trigger
`class.bx--tooltip__trigger: ```
Default value : `true`
Defined in src/dialog/tooltip/tooltip.directive.ts:58

tabindex
`tabindex: ```
Default value : `0`
Defined in src/dialog/tooltip/tooltip.directive.ts:56

### Methods

onDialogInit
`onDialogInit()`
Defined in src/dialog/tooltip/tooltip.directive.ts:79
Extends the `Dialog` component's data structure with tooltip properties. Returns : `void`

    import {
    	Directive,
    	Input,
    	TemplateRef,
    	ElementRef,
    	Injector,
    	ComponentFactoryResolver,
    	ViewContainerRef,
    	HostBinding
    } from "@angular/core";
    import { DialogDirective } from "./../dialog.directive";
    import { Tooltip } from "./tooltip.component";
    import { DialogService } from "./../dialog.service";

    /**
     * Directive for extending `Dialog` to create tooltips.
     *
     * [See demo](../../?path=/story/tooltip--basic)
     *
     * class: TooltipDirective (extends PopoverDirective)
     *
     *
     * selector: `nTooltip`
     *
     *
     * ```html
     * <button nTooltip="I am a tooltip" placement="right" trigger="mouseenter" type="danger">Tooltip Right</button>
     * <button nTooltip="I am a tooltip" type="warning">Tooltip Top warning on click</button>
     * ```
     *
     * <example-url>../../iframe.html?id=tooltip--basic</example-url>
     *
     * @export
     * @class TooltipDirective
     * @extends {DialogDirective}
     */
    @Directive({
    	selector: "[ibmTooltip]",
    	exportAs: "ibmTooltip",
    	providers: [
    		DialogService
    	]
    })
    export class TooltipDirective extends DialogDirective {
    	/**
    	 * The string or template content to be exposed by the tooltip.
    	 */
    	@Input() ibmTooltip: string | TemplateRef<any>;
    	/**
    	 * Set tooltip type to reflect 'warning' or 'error' styles.
    	 */
    	// tslint:disable-next-line:no-input-rename
    	@Input("tooltip-type") tooltipType: "warning" | "error" | "" = "";

    	@HostBinding("tabindex") tabIndex = 0;

    	@HostBinding("class.bx--tooltip__trigger") className = true;

    	@HostBinding("attr.aria-describedby") get descriptorId(): string {
    		return this.expanded ? this.dialogConfig.compID : null;
    	}

    	/**
    	 * Creates an instance of `TooltipDirective`.
    	 */
    	constructor(
    		protected elementRef: ElementRef,
    		protected viewContainerRef: ViewContainerRef,
    		protected dialogService: DialogService
    	) {
    		super(elementRef, viewContainerRef, dialogService);
    		dialogService.create(Tooltip);
    	}

    	/**
    	 * Extends the `Dialog` component's data structure with tooltip properties.
    	 */
    	onDialogInit() {
    		this.dialogConfig.content = this.ibmTooltip;
    		this.dialogConfig.type = this.tooltipType;
    	}
    }

# result-matching ""

# No results matching ""