feat: add tooltip for solution

phodal · Apr 9, 2020 · 02f2e9e · 02f2e9e
1 parent 663f619
commit 02f2e9e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/app/presentation/solution/solution.component.html b/src/app/presentation/solution/solution.component.html
@@ -1,6 +1,8 @@
 <mat-drawer-container class="solution">
   <mat-drawer mode="side" opened class="left-drawer">
-    <h2>解决方案</h2>
+    <h2>解决方案 <mat-icon class="help-icon"
+                       [matTooltipPosition]="'right'"
+                       matTooltip="为了 Ledge 平台的发展，当前仅免费提供给将 Ledge 列为合作伙伴的 DevOps 厂商。">help</mat-icon></h2>
     <ul>
       <li *ngFor="let casestudy of solutions"
           (click)="getCase(casestudy.source)"

diff --git a/src/app/presentation/solution/solution.component.scss b/src/app/presentation/solution/solution.component.scss
@@ -1,5 +1,5 @@
-@import "~@angular/material/theming";
-@import "../../../styles/behavior";
+@import '~@angular/material/theming';
+@import '../../../styles/behavior';
 
 .solution {
   min-height: 600px;
@@ -40,3 +40,12 @@
     }
   }
 }
+
+.help-icon {
+  top: 4px;
+  position: relative;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
diff --git a/src/app/shared/custom-material.module.ts b/src/app/shared/custom-material.module.ts
@@ -13,6 +13,7 @@ import {
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MatCardModule } from '@angular/material/card';
 import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 const modules = [
   MatToolbarModule,
@@ -25,6 +26,7 @@ const modules = [
   MatDialogModule,
   MatCardModule,
   MatInputModule,
+  MatTooltipModule,
 
   ScrollingModule,
 ];