### File

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

### Metadata

selector | `ibm-tooltip-icon`
template |
    <button
    	type="button"
    	class="bx--tooltip__trigger bx--tooltip--a11y"
    	[ngClass]="{
    		'bx--tooltip--bottom' : placement === 'bottom',
    		'bx--tooltip--top' : placement === 'top',
    		'bx--tooltip--left' : placement === 'left',
    		'bx--tooltip--right' : placement === 'right',
    		'bx--tooltip--align-start' : alignment === 'start',
    		'bx--tooltip--align-center' : alignment === 'center',
    		'bx--tooltip--align-end' : alignment === 'end'
    	}">
    	<span class="bx--assistive-text">{{content}}</span>
    	<ng-content></ng-content>
    </button>

### Index

###### Inputs
alignment content placement
###### HostBindings
class.bx--tooltip-icon

### Inputs

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

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

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

### HostBindings

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

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

    @Component({
    	selector: "ibm-tooltip-icon",
    	template: `
    		<button
    			type="button"
    			class="bx--tooltip__trigger bx--tooltip--a11y"
    			[ngClass]="{
    				'bx--tooltip--bottom' : placement === 'bottom',
    				'bx--tooltip--top' : placement === 'top',
    				'bx--tooltip--left' : placement === 'left',
    				'bx--tooltip--right' : placement === 'right',
    				'bx--tooltip--align-start' : alignment === 'start',
    				'bx--tooltip--align-center' : alignment === 'center',
    				'bx--tooltip--align-end' : alignment === 'end'
    			}">
    			<span class="bx--assistive-text">{{content}}</span>
    			<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" | "left" | "right" = "bottom";

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

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

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""