Warning: session_start(): open(/var/lib/php/fpm/session/sess_97uesqer14o28aflsifli16mnp, O_RDWR) failed: No such file or directory (2) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Angular Mobile Tooltip - Bootstrap 4 & Material Design. - Material Design for Bootstrap

Angular Mobile Tooltip

Angular Mobile Tooltip - Bootstrap 4 & Material Design

Wrapping Tooltip with layout

Every tooltip element has to be wrapped with his separated AbsoluteLayout. Without it, tooltip may not work properly.

Tooltip is great in situation, when you want to describe user some things without taking free space from the app layout. They works on both platforms!


Basic example

Very basic tooltip example - remember to wrap the tooltip activator into AbsoluteLayout!


        <AbsoluteLayout>
          <Button mdbBtn theme="primary" [mdbTooltip]="'tooltip text'" class="primary" text="MDB Button"></Button>
        </AbsoluteLayout>
      

Show and hide

Tooltip has built-in public methods to show and hide him with programmatically


        <AbsoluteLayout>
          <Button
            [mdbTooltip]="'tooltip text'"
            mdbBtn theme="primary"
            class="primary"
            text="MDB Button"
            #tooltip="mdbTooltip">
          </Button>
        </AbsoluteLayout>
      

        import {AfterViewInit, Component, ViewChild} from '@angular/core';
        import {MdbTooltipDirective} from "mdb-angular-mobile";

        @Component({
          selector: 'Home',
          moduleId: module.id,
          templateUrl: './home.component.html',
        })
        export class HomeComponent implements AfterViewInit {
          @ViewChild('tooltip', {static: false}) tooltip: MdbTooltipDirective;

          ngAfterViewInit(): void {
            setTimeout(() => {
              this.tooltip.show();
              setTimeout(() => {
                this.tooltip.hide();
              }, 1500)
            }, 2500);
          }
        }

      

Events

Tooltip has built-in four events which allow you to determine, in which state tooltip actual is


        <AbsoluteLayout>
          <Button
            [mdbTooltip]="'tooltip text'"
            mdbBtn theme="primary"
            class="primary"
            text="MDB Button"
            placement="bottom"
            (tooltipHidden)="onTooltipHidden($event)"
            (tooltipHide)="onTooltipHide($event)"
            (tooltipShow)="onTooltipShow($event)"
            (tooltipShown)="onTooltipShown($event)">
          </Button>
        </AbsoluteLayout>
      

        import {Component} from '@angular/core';

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './App.component.html',
        })
        export class AppComponent {
          onTooltipShow(event: any) {
            console.log(`show: ${event}`);
          }

          onTooltipShown(event: any) {
            console.log(`shown: ${event}`);
          }

          onTooltipHide(event: any) {
            console.log(`hide: ${event}`);
          }

          onTooltipHidden(event: any) {
            console.log(`hidden: ${event}`);
          }
        }

      

Angular Mobile Tooltip - API

In this section you will find informations about tooltip and its required modules and available inputs, outputs, methods and events.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular Mobile library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.


    // MDB Angular Mobile Free
    import { MdbTooltipModule } from 'mdb-angular-mobile'

Directives

MdbTooltip

Selector: mdbTooltip

Type: MdbTooltipDirective


Inputs

MdbTooltipDirective
Name Type Default Description Example
mdbTooltip string ' ' Allow to set the message displayed in the tooltip. [mdbTooltip]="'tooltip text'"
triggers string 'tap' Allow to change the events from which tooltip will be visible. Put multiple events after space. triggers="tap focus"
closeOnPage boolean true Allow to determine if tooltip should be closed after clicking on the page or not. closeOnPage="true"
duration number 200 Allow to determine how long should animation should be. Time in ms. duration="500"
placement 'top' | 'bottom' | 'left' | 'right' 'bottom' Allow to determine the default side, where tooltip should be rendererd. If it won't fit into remaining space, he will render opposite to actual position. placement="right"

Events

MdbTooltipDirective
Name Type Description Example
tooltipShown boolean This event fires immediately when the tooltip is shown. (tooltipShown)="tooltipShown($event)"
tooltipShow boolean This event fires immediately when the show method is called. (tooltipShow)="tooltipShow($event)"
tooltipHide boolean This event fires immediately when hide method is called. (tooltipHide)="tooltipHide($event)"
tooltipHidden boolean This event fires immediately when the tooltip is hidden. (tooltipHidden)="tooltipHidden($event)"

Methods

MdbTooltipDirective
Name Description
toggle(value: boolean) Toggle the tooltip based on the passed parameter.
show() Shows the tooltip.
hide() Hides the tooltip.