XcTooltip

Name

XcTooltip

Description

The XcTooltip directive can be used to show additional information (text, an image or an animation) when hovering over an element or focusing it via the tab key.

API

• @Input('xc-tooltip') tooltip: string | TemplateRef<any> Text or html template to display
• @Input('xc-tooltip-islabel') tooltipIsLabel: boolean Flag to control whether the tooltip is a label or a description (relevant for accessibility)
• @Input('xc-tooltip-controller') controller: XcTooltipController Means for binding the XcTooltipDirective to a XcTooltipController
• @Input('xc-tooltip-position') position: XcTooltipPosition | XcTooltipPosition[] Requested position(s) for displaying the tooltip that are tried in the given order
• @Input('xc-tooltip-disabled') disabled: boolean Flag for tooltip display (falsey 'xc-tooltip' leads to same result as 'xc-tooltip-disabled' set to true(
• @Input('xc-tooltip-showdelay') showDelay: number Delay before showing the tooltip in ms
• @Input('xc-tooltip-hidedelay') hideDelay: number Delay before hiding the tooltip in ms
• @Input('xc-tooltip-class') tooltipClass: string | string[] | Set<string> | { [key: string]: string } Additional CSS class(es) to apply

Example Implementation

Showing plain text

<xc-button
  (click)="update()"
  xc-tooltip="Xyna Factory a product owned by GIP"  
>Update Factory</xc-button>

HTML via a template

<ng-template #xynaFactory>
  <div style="font-size: 60px;">Xyna Factory a product owned by GIP
</ng-template>

<xc-button
  (click)="update()"
  [xc-tooltip]="xynaFactory"  
>Update Factory</xc-button>