Angular Components

ClrTooltip

Selector & Basic Usage

<clr-tooltip>
  <!-- clrTooltipTrigger -->
  <!-- clr-tooltip-content -->
</clr-tooltip>

ClrTooltipContent

Selector & Basic Usage

<clr-tooltip>
  <!-- clrTooltipTrigger -->
  <clr-tooltip-content>
    Concise description.
  </clr-tooltip-content>
</clr-tooltip>

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

<clr-tooltip>
  <cds-icon shape="help" clrTooltipTrigger></cds-icon>
  <!-- clr-tooltip-content -->
</clr-tooltip>

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

<clr-tooltip>
  <!-- clrTooltipTrigger -->
  <clr-tooltip-content *clrIfOpen>
    Concise description.
  </clr-tooltip-content>
</clr-tooltip>

Bindings

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