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.

!!! TODO !!!

API

• xc-tooltip the tooltip to show
  • determines the master area's behavior when the details are opened
  • allowed values: side (default), over
  • side: the master area shrinks when the details are shown
  • over: the details overlap with the master area and the master area is locked while the details are shown
• xc-master-detail-opened boolean, controls whether the details are shown
• xc-master-detail-position
  • configures at which side of the master area the details are shown
  • allowed values: start, end (default)
• xc-master-detail-side-area-size
  • sets the horizontal size of the detail area
  • allowed values: full, large, half, golden (default), small (mentioned values sorted from large to small)

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;
}