### File

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

### Metadata

selector | `ibm-tooltip-icon`

template

    <button
    	type="button"
    	class="bx--tooltip__trigger"
    	[ngClass]="{
    		'bx--tooltip--icon__bottom' : placement === 'bottom',
    		'bx--tooltip--icon__top' : placement === 'top'
    	}"
    	[attr.aria-label]="content">
    	<ng-content></ng-content>
    </button>

### Index

###### Inputs

- content
- placement

###### HostBindings

- class.bx--tooltip-icon

### Inputs

`content` | Body content for the `TooltipIcon`. Type : `string`
Defined in src/dialog/tooltip/tooltip-icon.component.ts:22

`placement` | The placement in which the `TooltipIcon` appears. Set to `"top"` to have it positioned above the icon Type : `"bottom" | "top"` Default value : `"bottom"`
Defined in src/dialog/tooltip/tooltip-icon.component.ts:27

### HostBindings

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

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

    @Component({
    	selector: "ibm-tooltip-icon",
    	template: `
    		<button
    			type="button"
    			class="bx--tooltip__trigger"
    			[ngClass]="{
    				'bx--tooltip--icon__bottom' : placement === 'bottom',
    				'bx--tooltip--icon__top' : placement === 'top'
    			}"
    			[attr.aria-label]="content">
    			<ng-content></ng-content>
    		</button>
    	`
    })
    export class TooltipIcon {
    	/**
    	 * Body content for the `TooltipIcon`.
    	 */
    	@Input() content: string;
    	/**
    	 * The placement in which the `TooltipIcon` appears.
    	 * Set to `"top"` to have it positioned above the icon
    	 */
    	@Input() placement: "bottom" | "top" = "bottom";

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

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""