### File

`src/dialog/tooltip/tooltip-definition.component.ts`

### Metadata

selector | `ibm-tooltip-definition`

template

    <button type="button" class="bx--tooltip__trigger" [attr.aria-describedby]="id">
    	<ng-content></ng-content>
    </button>
    <div
    	[id]="id"
    	[ngClass]="{
    		'bx--tooltip--definition__bottom' : placement === 'bottom',
    		'bx--tooltip--definition__top' : placement === 'top'
    	}"
    	role="tooltip"
    	[attr.aria-label]="content">
    	<span class="bx--tooltip__caret"></span>
    	<p>{{content}}</p>
    </div>

### Index

###### Properties

- Static tooltipItemCount

###### Inputs

- content
- id
- placement

###### HostBindings

- class.bx--tooltip--definition

### Inputs

`content` | Body content for the `TooltipDefinition`. Type : `string`
Defined in src/dialog/tooltip/tooltip-definition.component.ts:29

`id` | Default value : ``definition-tooltip-${TooltipDefinition.tooltipItemCount++}``
Defined in src/dialog/tooltip/tooltip-definition.component.ts:25

`placement` | The placement in which the `TooltipDefinition` appears. Set to `"top"` to have it positioned above the trigger text Type : `"bottom" | "top"` Default value : `"bottom"`
Defined in src/dialog/tooltip/tooltip-definition.component.ts:34

### HostBindings

class.bx--tooltip--definition
`class.bx--tooltip--definition: ```
Default value : `true`
Defined in src/dialog/tooltip/tooltip-definition.component.ts:36

### Properties

Static tooltipItemCount
`tooltipItemCount: `number``
Type : `number`
Default value : `0`
Defined in src/dialog/tooltip/tooltip-definition.component.ts:23

    import { Component, Input, HostBinding } from "@angular/core";

    @Component({
    	selector: "ibm-tooltip-definition",
    	template: `
    		<button type="button" class="bx--tooltip__trigger" [attr.aria-describedby]="id">
    			<ng-content></ng-content>
    		</button>
    		<div
    			[id]="id"
    			[ngClass]="{
    				'bx--tooltip--definition__bottom' : placement === 'bottom',
    				'bx--tooltip--definition__top' : placement === 'top'
    			}"
    			role="tooltip"
    			[attr.aria-label]="content">
    			<span class="bx--tooltip__caret"></span>
    			<p>{{content}}</p>
    		</div>
    	`
    })
    export class TooltipDefinition {
    	static tooltipItemCount = 0;

    	@Input() id = `definition-tooltip-${TooltipDefinition.tooltipItemCount++}`;
    	/**
    	 * Body content for the `TooltipDefinition`.
    	 */
    	@Input() content: string;
    	/**
    	 * The placement in which the `TooltipDefinition` appears.
    	 * Set to `"top"` to have it positioned above the trigger text
    	 */
    	@Input() placement: "bottom" | "top" = "bottom";

    	@HostBinding("class.bx--tooltip--definition") className = true;
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""