### File

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

### Metadata

selector | `ibm-tooltip-definition`
template |
    <button
    	type="button"
    	[ngClass]="{
    		'bx--tooltip--bottom' : placement === 'bottom',
    		'bx--tooltip--top' : placement === 'top',
    		'bx--tooltip--align-start' : alignment === 'start',
    		'bx--tooltip--align-center' : alignment === 'center',
    		'bx--tooltip--align-end' : alignment === 'end'
    	}"
    	class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition"
    	[attr.aria-describedby]="id">
    	<ng-content></ng-content>
    </button>
    <div class="bx--assistive-text" [id]="id" role="tooltip">{{content}}</div>

### Index

###### Properties
Static tooltipItemCount
###### Inputs
alignment content id placement
###### HostBindings
class.bx--tooltip--a11y class.bx--tooltip--definition

### Inputs

`alignment` | Type : `"start" | "center" | "end"` Default value : `"start"`
Defined in src/dialog/tooltip/tooltip-definition.component.ts:36

`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--a11y
`class.bx--tooltip--a11y: ```
Default value : `true`
Defined in src/dialog/tooltip/tooltip-definition.component.ts:39

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

### 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"
    			[ngClass]="{
    				'bx--tooltip--bottom' : placement === 'bottom',
    				'bx--tooltip--top' : placement === 'top',
    				'bx--tooltip--align-start' : alignment === 'start',
    				'bx--tooltip--align-center' : alignment === 'center',
    				'bx--tooltip--align-end' : alignment === 'end'
    			}"
    			class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition"
    			[attr.aria-describedby]="id">
    			<ng-content></ng-content>
    		</button>
    		<div class="bx--assistive-text" [id]="id" role="tooltip">{{content}}</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";

    	@Input() alignment: "start" | "center" | "end" = "start";

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

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""