Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Tooltip Component

Documentation and examples for adding Angular Tooltips.

Use CoreUI Angular tooltip directive to create beautiful tooltips and present hint or information regarding the element on hover. Tutorials and examples for adding custom CoreUI Angular tooltips. ## Examples ### Base tooltips - Hover over the links below to see tooltips:

### Directions - Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.

### Html content - Use `ng-template` to render html content and / or non default triggers (click).

### Reference element - Use `cTooltipRef` to position the tooltip on reference element. 5.1.0+

--- ## API reference ### Tooltip ```typescript import { TooltipModule } from '@coreui/angular'; @NgModule({ imports: [TooltipModule,] }) export class AppModule() { } ``` --- ### Props ##### Inputs

|prop|description|type|default|notes| |:---|:---|:---|:---:|---| |`cTooltip` | Content of a tooltip. | `string`, `TemplateRef` | - | _required_ |`cTooltipOptions` | Optional popper Options object, takes precedence over cPopoverPlacement. | `Options` | - | |`cTooltipPlacement` | Placement of a tooltip. | `top`, `bottom`, `left`, `right` | `top` | _string_ |`cTooltipTrigger` | Sets event handlers to toggle tooltip. Specify one trigger or an array of them. | `Triggers`, `Triggers[]` | `hover` | _string_, _string[]_ |`cTooltipVisible` | Toggle the visibility of tooltip component. | `boolean` | `false` | |`cTooltipRef` | ElementRefDirective reference | `ElementRefDirective` | `undefined` | 5.1.0+