Advanced User Interface Controls and Components
Created: 08 May 2017
In general, the Accordion component does not have a built-in tooltip. In order to display a tooltip for accordion groups, you can use the IntegralUI Tooltip directive. This directive is attachable to any HTML element or Angular component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
Whenever you move the mouse cursor above the group title, a tooltip will appear in one text line. To keep the example simple, other functionalities like position, time delay, appearance of the tooltip are excluded. Detailed demonstration of these properties is presented here: Angular Tooltip.
In order to attach the Tooltip directive to Accordion groups, you only need to set the iuiTooltip property to group header. This property accepts an object that holds all tooltip settings.
//
// app.module.ts
//
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { IntegralUIModule } from './integralui/integralui.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
IntegralUIModule
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
//
// app.component.ts
//
import { Component, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html',
styleUrls: ['sample-styles.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;
public data: Array;
constructor(){
this.data = [
{ text: 'Group 1', tooltip: { title: 'Tooltip for Group 1' } },
{ text: 'Group 2', tooltip: { title: 'Tooltip for Group 2' } },
{ text: 'Group 3', tooltip: { title: 'Tooltip for Group 3' } }
];
}
ngAfterViewInit(){
// Set the refernce component by which the position of tooltip is calculated
// Usually, the appRef should point to the root component, to avoid position adjustment
for (let i = 0; i < this.data.length; i++)
this.data[i].tooltip.appRef = this.applicationRef;
}
}
//
// app.template.html
//
<div #application>
<iui-accordion [groups]="data">
<iui-groupbox *ngFor="let group of data" [expandBoxType]="'arrow'" #groupbox>
<iui-group-header>
<div class="acc-tt-group-header" [iuiTooltip]="group.tooltip">
{{group.text}}
</div>
</iui-group-header>
<div class="acc-tt-group-content">Content of {{group.text}}</div>
</iui-groupbox>
</iui-accordion>
</div>
/*
* sample-styles.css
*/
.iui-accordion
{
width: 400px;
}
.acc-tt-group-content
{
padding: 50px 0;
border: thin solid #bbbbbb;
border-top-color: transparent;
text-align: center;
}
.acc-tt-group-header
{
display: inline-block;
padding: 3px 0;
}
.iui-header-expand-box
{
top: 2px;
right: 2px;
}
The most important setting is the appRef field, which holds a reference to top application component. This is required in order to create the tooltip component dynamically and display it when demanded. In addition, this is a reference point by which the position of the tooltip is calculated. The tooltip by default has its position field set to 'mouse', which states that it will appear a little below the mouse cursor position.
Each group need to have this directive set up in its header. The title field is used to set up the text that tooltip displays.
Accordion component by default doesn't have a tooltip functionality. In order to add a tooltip you can use a separate Tooltip directive, which allows you to add a tooltip to different parts of the accordion. Each group in accordion must have its own tooltip settings.
The Accordion component is part of IntegralUI Web.