hidden tooltip

src/app/modules/overview/overall-ground/overall-ground.component.html

 
         <div *ngIf="Sstate1 && Sstate2" class="alarm-text"
              [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
-        <div class="tooltiptext">
-          <div style="display: flex;
-                      flex-direction: row;
-                      justify-content: space-between;
-                      margin-bottom: 5px">
-            <div style="color: #F33152;
-                        padding: 5px 13px;
-                        background-color: rgba(243, 49, 82, 0.1);
-                        border-radius: 20px;
-                        text-align: center;
-                        width: 120px;">Hệ thống báo động 2</div>
-            <a href="/overview/camera-stream" target="_blank">
-              <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
-                <g stroke="currentColor" stroke-width="2">
-                  <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
-                  <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
-                </g>
-              </svg>
-            </a>
-          </div>
-          <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
-          <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
-          <div><strong>Thời gian:</strong> 01:54, 01/06/2024</div>
-        </div>
+<!--        <div class="tooltiptext">-->
+<!--          <div style="display: flex;-->
+<!--                      flex-direction: row;-->
+<!--                      justify-content: space-between;-->
+<!--                      margin-bottom: 5px">-->
+<!--            <div style="color: #F33152;-->
+<!--                        padding: 5px 13px;-->
+<!--                        background-color: rgba(243, 49, 82, 0.1);-->
+<!--                        border-radius: 20px;-->
+<!--                        text-align: center;-->
+<!--                        width: 120px;">Hệ thống báo động 2</div>-->
+<!--            <a href="/overview/camera-stream" target="_blank">-->
+<!--              <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">-->
+<!--                <g stroke="currentColor" stroke-width="2">-->
+<!--                  <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>-->
+<!--                  <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>-->
+<!--                </g>-->
+<!--              </svg>-->
+<!--            </a>-->
+<!--          </div>-->
+<!--          <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>-->
+<!--          <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>-->
+<!--          <div><strong>Thời gian:</strong> 01:54, 01/06/2024</div>-->
+<!--        </div>-->
 
       </div>
       <div class="state t6 tooltip" id="State6">
         </div>
         <div *ngIf="Sstate1 && Sstate2" class="alarm-text"
              [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div>
-        <div class="tooltiptext">
-          <div style="display: flex;
-                      flex-direction: row;
-                      justify-content: space-between;
-                      margin-bottom: 5px">
-            <div style="color: #F33152;
-                        padding: 5px 13px;
-                        background-color: rgba(243, 49, 82, 0.1);
-                        border-radius: 20px;
-                        text-align: center;
-                        width: 120px;">Hệ thống báo động 1</div>
-            <a href="/overview/camera-stream" target="_blank">
-              <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
-                <g stroke="currentColor" stroke-width="2">
-                  <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
-                  <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
-                </g>
-              </svg>
-            </a>
-          </div>
-          <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
-          <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
-          <div><strong>Thời gian:</strong> 01:54, 01/06/2024</div>
-        </div>
+<!--        <div class="tooltiptext">-->
+<!--          <div style="display: flex;-->
+<!--                      flex-direction: row;-->
+<!--                      justify-content: space-between;-->
+<!--                      margin-bottom: 5px">-->
+<!--            <div style="color: #F33152;-->
+<!--                        padding: 5px 13px;-->
+<!--                        background-color: rgba(243, 49, 82, 0.1);-->
+<!--                        border-radius: 20px;-->
+<!--                        text-align: center;-->
+<!--                        width: 120px;">Hệ thống báo động 1</div>-->
+<!--            <a href="/overview/camera-stream" target="_blank">-->
+<!--              <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">-->
+<!--                <g stroke="currentColor" stroke-width="2">-->
+<!--                  <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>-->
+<!--                  <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>-->
+<!--                </g>-->
+<!--              </svg>-->
+<!--            </a>-->
+<!--          </div>-->
+<!--          <div><strong>Địa điểm:</strong> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>-->
+<!--          <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>-->
+<!--          <div><strong>Thời gian:</strong> 01:54, 01/06/2024</div>-->
+<!--        </div>-->
     </div>
 
 <!--      <div *ngFor="let state of states; let i = index"-->
   <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">
     <button [disabled]="!isConnected" mat-flat-button color="{{Sstate1 ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ Sstate1 ? 'DISARM' : 'ARM'}}</button>
     <button [disabled]="!isConnected" mat-flat-button color="{{Sstate2 ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ Sstate2 ? 'TURN OFF WARNING' : 'TURN ON WARNING'}}</button>
-    <button mat-stroked-button color="primary" [routerLink]="'/overview/camera-stream'" target="_blank"> LIVE CAMERA </button>
+    <a style = "padding: 30px 50px;" mat-stroked-button color="primary" href="/overview/camera-stream" target="_blank"> LIVE CAMERA </a>
+
   </div>
 </div>