LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Add a Tooltip to Angular Accordion

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.

Accordion component is part of IntegralUI Web
a suite of UI Components for development of web apps

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.

Accordion Groups with a 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.

Conclusion

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.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.