Angular Components
ClrTooltip
Selector & Basic Usage
ClrTooltipContent
Selector & Basic Usage
Bindings
Binding | Type | Options | Default | Description |
---|---|---|---|---|
[id] | input | any valid string | sm | 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 | sm | 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. |