feat(lib): support of tooltip position

Author: AnthonyNahas

README.md

@@ -133,16 +133,20 @@ Other modules in your application like for lazy loading import ` MatSelectCountr
 Important interfaces or type
 
 ```typescript
-type MatFabMenuDirection = 'top' | 'bottom' | 'left' | 'right';
+
+import {ThemePalette, TooltipPosition} from '@angular/material';
 
 interface MatFabMenu {
-  id: number;
+  id: string | number;
   icon?: string; // please use either icon or imgUrl
+  iconColor?: ThemePalette;
   imgUrl?: string; // please use either icon or imgUrl
-  tooltip?: string; // coming soon
+  tooltip?: string;
+  tooltipPosition?: TooltipPosition;
   color?: ThemePalette;
-  iconColor?: ThemePalette;
 }
+
+type MatFabMenuDirection = 'top' | 'bottom' | 'left' | 'right';
 ```
 
 

assets/angular-material-extensions-logo.png

@@ -0,0 +1,24 @@
+DO’s
+----
+
+* Do use the logos to link to JetBrains website: https://www.jetbrains.com
+* Do use the logos to advertise that your product has built-in integration with a JetBrains product
+* Do use the graphics in printed or online materials, but respect the minimum size of the logo: 7.5mm in print and 50px on screen/digital.
+
+
+Don’ts
+------
+
+* Don’t change the colors of the logos
+* Don’t change the aspect ratio of the logos when resizing
+* Don’t crop the logos
+* Don’t use the black square without the beam or the product name
+* Don’t add any text on the logo 
+* Don’t sell our logos
+
+If in doubt, please contact [email protected]
+
+--
+
+Thank you!
+The JetBrains Team

assets/angular-material-extensions-logo.svg

@@ -15,6 +15,8 @@
     <button (click)="onFabMenuItemSelected.emit(fab.id)"
             *ngFor="let fab of fabButtons"
             [color]="fab?.color"
+            [matTooltip]="fab?.tooltip"
+            [matTooltipPosition]="fab?.tooltipPosition"
             [ngClass]="{'fullSVG' : fab?.imgUrl}"
             mat-fab>
       <mat-icon *ngIf="fab?.icon" [color]="fab?.iconColor">{{fab?.icon}}</mat-icon>

assets/jetbrains-variant-4_logos/LICENSE.txt

@@ -1,14 +1,15 @@
 import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
 import {speedDialFabAnimations} from './mat-fab-menu.animations';
-import {ThemePalette} from '@angular/material';
+import {ThemePalette, TooltipPosition} from '@angular/material';
 
 export interface MatFabMenu {
   id: string | number;
   icon?: string; // please use either icon or imgUrl
+  iconColor?: ThemePalette;
   imgUrl?: string; // please use either icon or imgUrl
   tooltip?: string;
+  tooltipPosition?: TooltipPosition;
   color?: ThemePalette;
-  iconColor?: ThemePalette;
 }
 
 export type MatFabMenuDirection = 'top' | 'bottom' | 'left' | 'right';

assets/jetbrains-variant-4_logos/jetbrains-variant-4.png

@@ -2,7 +2,8 @@ import {NgModule} from '@angular/core';
 import {MatFabMenuComponent} from './mat-fab-menu.component';
 import {MatButtonModule} from '@angular/material/button';
 import {CommonModule} from '@angular/common';
-import {MatIconModule} from '@angular/material';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {FlexLayoutModule} from '@angular/flex-layout';
 
 @NgModule({
@@ -11,6 +12,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
     CommonModule,
     MatButtonModule,
     MatIconModule,
+    MatTooltipModule,
     FlexLayoutModule
   ],
   exports: [MatFabMenuComponent]

assets/jetbrains-variant-4_logos/jetbrains-variant-4.svg

@@ -58,19 +58,27 @@ export class AppComponent implements OnInit {
   fabCountries: MatFabMenu[] = [
     {
       id: 1,
-      imgUrl: 'assets/countrys-flags/svg/canada.svg'
+      imgUrl: 'assets/countrys-flags/svg/canada.svg',
+      tooltip: 'canada',
+      tooltipPosition: 'before'
     },
     {
       id: 2,
-      imgUrl: 'assets/countrys-flags/svg/germany.svg'
+      imgUrl: 'assets/countrys-flags/svg/germany.svg',
+      tooltip: 'germany',
+      tooltipPosition: 'before'
     },
     {
       id: 3,
-      imgUrl: 'assets/countrys-flags/svg/france.svg'
+      imgUrl: 'assets/countrys-flags/svg/france.svg',
+      tooltip: 'france',
+      tooltipPosition: 'before'
     },
     {
       id: 4,
-      imgUrl: 'assets/countrys-flags/svg/lebanon.svg'
+      imgUrl: 'assets/countrys-flags/svg/lebanon.svg',
+      tooltip: 'lebanon',
+      tooltipPosition: 'before'
     },
   ];