Skip to main content Skip to navigation Skip to search

Tooltip

Angular Components

ClrTooltip

Selector & Basic Usage

ClrTooltipContent

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[id] input any valid string Set the id of a tooltip.
[clrPosition] input right, top-right, top-left, bottom-right, bottom-left, right, left right Set the display position for the content related to the trigger element..
[clrSize] input xs, sm, md, lg md Set the size of the content element.

Angular Directives

ClrTooltipTrigger

Used to designate the open/close element for ClrTooltipContent.

Selector & Basic Usage

ClrIfOpen

The tooltip component uses the *clrIfOpen structural directive on the tooltip content to indicate clearly the tooltip content is only present in the DOM when open. We recommend using it for these reasons: better performance, clear intention in your own templates, and following a the natural lifecycle for directives and components inside of the tooltip.

If you do not want this behavior we also support the tooltip content without a *clrIfOpen directive on it. It will be created eagerly when the tooltip itself initializes, and will not be destroyed or recreated until the tooltip itself is. One reason to bypass the *clrIfOpen directive is when screenreaders need to read the tooltip inline instead of when the user moves focus to the trigger.

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[(clrIfOpen)] two-way true, false false Set the open / close state of element it is applied to.