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
• ``
• ``

!!! TODO !!!

Style

The class xc-panel can be used to show to input fields in one row.

Usage

The html page needs an element <xc-master-detail> with two children (recommended type: <xc-panel>). One of them needs to have the attribute master and the other one detail, with each child containing the corresponding content to show.

The directive [xc-master-detail-opened] opens the details when true is passed.

Example Implementation

HTML

<xc-master-detail [xc-master-detail-opened]="selectedCar">
  <xc-panel master>
    ...
  </xc-panel>
  <xc-panel detail>
    ...
  </xc-panel>
</xc-master-detail>

TypeScript:

selectedCar = null;

constructor() {
  this.dsCars.localTableData = {...};
  this.dsCars.selectionModel.change.subscribe(this.tableSelectionChange.bind(this));
}

private tableSelectionChange(model) {
  this.selectedCar = model.selection[0] || null;
}