Tooltip

Import

                                                        
                                                        
                                                            import { TooltipModule } from '@backbase/ui-ang/tooltip-directive'
                                                        
                                                            

Usage

Use the bbTooltip directive to add tooltip functionality to any element.

                                                        
                                                        
                                                            <!-- Basic tooltip usage -->
                                                        <bb-icon-ui
                                                            name="info"
                                                            color="info"
                                                            size="lg"
                                                            bbTooltip="Cancelling this payment cannot be undone!"
                                                            [container]="'body'">
                                                        </bb-icon-ui>
                                                        
                                                            

Inputs

Global configuration token

The TOOLTIP_CONFIG_TOKEN token sets the same global configuration for all instances of the tooltip directive in the project. The following properties can be overridden:

• triggers
• closeDelay
• openDelay

                                                        
                                                        
                                                            import { TOOLTIP_CONFIG_TOKEN } from '@backbase/ui-ang/tooltip-directive';
                                                        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
                                                        import { AppModule } from './app/app.module';
                                                        const tooltipConfig = {
                                                          triggers: 'click',
                                                          closeDelay: 400
                                                        };
                                                        platformBrowserDynamic().bootstrapModule(AppModule, {
                                                          providers: [{ provide: TOOLTIP_CONFIG_TOKEN, useValue: tooltipConfig }]
                                                        });
                                                        
                                                            

bbTooltip

The bbTooltip input sets the content to be displayed as tooltip. Accepts a string or TemplateRef. If false, the tooltip won't open.

                                                        
                                                        
                                                            <!-- Tooltip with string content -->
                                                        <button bbTooltip="Click to save your changes">Save</button>
                                                        
                                                        <!-- Tooltip with template content -->
                                                        <button [bbTooltip]="tooltipTemplate">Advanced Options</button>
                                                        <ng-template #tooltipTemplate>
                                                            <strong>Advanced Options</strong>
                                                            <p>Configure advanced settings here</p>
                                                        </ng-template>
                                                        
                                                            

isOpenWithContext

The isOpenWithContext input controls whether the tooltip is open and provides context data.

                                                        
                                                        
                                                            <!-- Tooltip that is always open -->
                                                        <bb-icon-ui
                                                            name="info"
                                                            bbTooltip="This tooltip is always opened unless the icon is clicked!"
                                                            [isOpenWithContext]="true">
                                                        </bb-icon-ui>
                                                        
                                                            

triggers

The triggers input specifies the events that should trigger the tooltip (space separated strings). This input can be overridden via the global configuration token.

                                                        
                                                        
                                                            <!-- Tooltip triggered on hover -->
                                                        <span bbTooltip="Hover to see this tooltip" [triggers]="'mouseenter:mouseleave'">
                                                            Hover me
                                                        </span>
                                                        
                                                        <!-- Tooltip triggered on focus -->
                                                        <input bbTooltip="Enter your email address" [triggers]="'focus:blur'" placeholder="Email">
                                                        
                                                        <!-- Tooltip triggered on multiple events -->
                                                        <button bbTooltip="Multiple triggers" [triggers]="'click hover focus'">
                                                            Multi-trigger button
                                                        </button>
                                                        
                                                            

Accessibility

The Tooltip directive includes comprehensive accessibility features:

• ARIA attributes: Automatically manages aria-expanded attribute to indicate tooltip state.
• Keyboard support: Works with keyboard navigation and focus events.
• Screen reader compatibility: Tooltip content is properly announced by assistive technologies.
• Focus management: Maintains proper focus behavior when tooltips open and close.
• Template support: Allows rich content with proper semantic structure.

The directive extends NgBootstrap's tooltip functionality and inherits all its accessibility features while adding enhanced ARIA support.