Angular Material Tooltip

[bertdecoutere]

Hi,

I'm struggling to implement the new angular material design tooltip into an Appery Ionic 5 application.
So far I've managed to add the @angular/material, @angular/cdk and @angular/animations to the NPM modules in the app settings.
On my page I have imported the module: import {MatTooltipModule} from '@angular/material/tooltip';
On a button I've added the property [matTooltip]. All that works fine. But when I run the application I get an error about "Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application."

So can anyone help me how to add the BrowserAnimatonsModule or NoopAnimationsModule to the application? I have tried different ways but I'm not succeeding.

[bertdecoutere]

Or let me ask in another way: how do I add tooltips (some explanation text when you move with your mouse over a button on a computer, or when you click and hold on mobile) to an ionic5 app?

[Serhii Kulibaba]

Hello,

Please use Ionic default components in your project, they work better than Material. In your case, it would be popover component:
https://docs.appery.io/docs/ionic-4-sni ... controller
Example: https://ionicframework.com/docs/api/popover

Please see the following steps on how to use it in your Appery.io project:

1. Create a custom component (e.g. with a name cc1) with the full popover content you need to display

2. Add to "Internal includes" of the page the "PopoverController"

3., Add to "Custom includes" {cc1} with a value ../custom_component/cc1/cc1 (see the attached screenshot for more details)

1. Now you can call the following code to open that popover:

Code: Select all

let controller = this.Apperyio.getController("PopoverController"); // available controllers: ActionSheetController, AlertController, PickerController, MenuController, ModalController, PopoverController, LoadingController, ToastController

const popover = await controller.create({
    component: cc1,
    // cssClass: 'my-custom-class',
    // event: ev,
    translucent: true
});
return await popover.present();