Introduction Tooltip Components

main/http_server/axe-os/src/app/app.module.ts

@@ -15,6 +15,8 @@ import { PoolComponent } from './components/pool/pool.component';
 import { NetworkEditComponent } from './components/network-edit/network.edit.component';
 import { HomeComponent } from './components/home/home.component';
 import { ModalComponent } from './components/modal/modal.component';
+import { TooltipIconComponent } from './components/tooltip-icon/tooltip-icon.component';
+import { TooltipTextIconComponent } from './components/tooltip-text-icon/tooltip-text-icon.component';
 import { ConfettiComponent } from './components/confetti/confetti.component';
 import { LogsComponent } from './components/logs/logs.component';
 import { SystemComponent } from './components/system/system.component';
@@ -42,6 +44,8 @@ const components = [
   NetworkEditComponent,
   HomeComponent,
   ModalComponent,
+  TooltipIconComponent,
+  TooltipTextIconComponent,
   ConfettiComponent,
   NetworkComponent,
   SettingsComponent,

main/http_server/axe-os/src/app/components/home/home.component.html

@@ -111,22 +111,18 @@
                     <span class="text-500">rejected</span>
                 </div>
                 <div *ngIf="info.sharesRejected > 0">
-                    <div *ngFor="let sharesRejectedReason of getSortedRejectionReasons(info); trackBy: trackByReason">
-                        <span
-                        class="inline-block"
-                        pTooltip="{{ getRejectionExplanation(sharesRejectedReason.message) }}"
-                        [tooltipDisabled]="!getRejectionExplanation(sharesRejectedReason.message)"
-                        tooltipPosition="bottom"
-                        >
+                    <ng-container *ngFor="let sharesRejectedReason of getSortedRejectionReasons(info); trackBy: trackByReason">
                         <span class="text-red-500 font-medium">
                             {{ sharesRejectedReason.count | number: '1.0-0' }}
                         </span>
                         <span class="text-500">
                             {{ sharesRejectedReason.message }}
                         </span>
-                        ({{getShareRejectionPercentage(sharesRejectedReason, info) | number: '1.2-2'}} %)
-                        </span>
-                    </div>
+                        <tooltip-text-icon
+                            [text]="'(' + (getShareRejectionPercentage(sharesRejectedReason, info) | number:'1.2-2') + ' %)'"
+                            [tooltip]="getRejectionExplanation(sharesRejectedReason.message)"
+                            [split]=false />
+                    </ng-container>
                 </div>
             </div>
         </div>
@@ -347,7 +343,10 @@ <h4 class="mb-0">Pool</h4>
 
                 <div class="flex flex-nowrap">
                     <div class="col-fixed-width text-500">
-                        <span class="white-space-nowrap">Time <i class="pi pi-info-circle text-xs px-1" pTooltip="Time it takes for the pool to respond to a share"></i></span>
+                        <tooltip-text-icon
+                            text="Time"
+                            tooltip="Time it takes for the pool to respond to a share"
+                        />
                     </div>
                     <div>
                         {{ info.responseTime }} ms

main/http_server/axe-os/src/app/components/network-edit/network.edit.component.html

@@ -1,7 +1,12 @@
 <form *ngIf="form" [formGroup]="form">
     <div class="card">
         <div class="field grid p-fluid">
-            <label for="hostname" class="col-12 md:col-2 md:m-0">Hostname</label>
+            <label for="hostname" class="col-12 md:col-2 md:m-0">
+                <tooltip-text-icon
+                    text="Hostname"
+                    tooltip="Name of the device on your local network"
+                />
+            </label>
             <div class="col-12 md:col-10">
                 <input pInputText id="hostname" type="text" formControlName="hostname" />
             </div>

main/http_server/axe-os/src/app/components/pool/pool.component.html

@@ -46,10 +46,10 @@ <h2 *ngIf="pool === 'fallbackStratum'" class="mt-5">Fallback Pool Configuration<
 
                     <div *ngIf="showAdvancedOptions[pool]" class="field grid p-fluid mt-4">
                         <label [htmlFor]="pool + 'SuggestedDifficulty'" class="col-12 md:col-2 md:mb-0">
-                            Suggested <span class="white-space-nowrap">
-                                Difficulty
-                                <i class="pi pi-info-circle text-xs px-1" pTooltip="Used to indicate a preference for share difficulty to the pool. Servers are not required to honour this request, even if they support the stratum method. (0 to disable)"></i>
-                            </span>
+                            <tooltip-text-icon
+                                text="Suggested Difficulty"
+                                tooltip="Used to indicate a preference for share difficulty to the pool. Servers are not required to honour this request, even if they support the stratum method. (0 to disable)"
+                            />
                         </label>
                         <div class="col-12 md:col-10">
                             <input pInputText [id]="pool + 'SuggestedDifficulty'" [formControlName]="pool + 'SuggestedDifficulty'" type="number" />
@@ -61,10 +61,10 @@ <h2 *ngIf="pool === 'fallbackStratum'" class="mt-5">Fallback Pool Configuration<
                                 [binary]="true"></p-checkbox>
                         </div>
                         <label [htmlFor]="pool + 'ExtranonceSubscribe'" class="col-11 m-0 pl-3 md:col-2 md:flex-order-1 md:p-2">
-                            Enable Extranonce <span class="white-space-nowrap">
-                                Subscribe
-                                <i class="pi pi-info-circle text-xs px-1" pTooltip="Indicates to the server that the client supports the mining.set_extranonce method. Required by some pools, check the pool documentation."></i>
-                            </span>
+                            <tooltip-text-icon
+                                text="Enable Extranonce Subscribe"
+                                tooltip="Indicates to the server that the client supports the mining.set_extranonce method. Required by some pools, check the pool documentation."
+                            />
                         </label>
                     </div>
                 </fieldset>

main/http_server/axe-os/src/app/components/tooltip-icon/tooltip-icon.component.html

@@ -0,0 +1,12 @@
+<ng-container *ngIf="tooltip">
+    <i *ngIf="!isMobile" pTooltip="{{tooltip}}" [ngClass]="tooltipIconClass"></i>
+
+    <button *ngIf="isMobile" (click)="showMobileTooltip = true" [ngClass]="tooltipIconClass"></button>
+
+    <div *ngIf="showMobileTooltip" (click)="showMobileTooltip = false" class="tooltip-mobile-backdrop">
+        <div class="tooltip-mobile-content">
+            <button class="tooltip-mobile-close" (click)="showMobileTooltip = false">&times;</button>
+            <p>{{ tooltip }}</p>
+        </div>
+    </div>
+</ng-container>

main/http_server/axe-os/src/app/components/tooltip-icon/tooltip-icon.component.scss

@@ -0,0 +1,45 @@
+.tooltip-icon {
+    appearance: none;
+    border: none;
+    outline: none;
+    background: none;
+    cursor: pointer;
+}
+
+.tooltip-mobile {
+    &-backdrop {
+        background-color: rgba(0, 0, 0, 0.5);
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        position: fixed;
+        z-index: 9;
+        display: flex;
+        align-items: flex-end;
+    }
+
+    &-content {
+        width: 100%;
+        background: var(--surface-d);
+        color: #fff;
+        padding: 1.5rem 4rem 1.5rem 1.5rem;
+        border-radius: 1.5rem 1.5rem 0 0;
+        position: relative;
+        white-space: normal;
+    }
+
+    &-close {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        right: 1.5rem;
+        top: 1.5rem;
+        border: none;
+        background: var(--button-bg);
+        font-size: 18px;
+        line-height: 18px;
+        display: flex;
+        justify-content: center;
+    }
+}

main/http_server/axe-os/src/app/components/tooltip-icon/tooltip-icon.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TooltipIconComponent } from './tooltip-icon.component';
+
+describe('WifiIconComponent', () => {
+  let component: TooltipIconComponent;
+  let fixture: ComponentFixture<TooltipIconComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TooltipIconComponent]
+    });
+    fixture = TestBed.createComponent(TooltipIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

main/http_server/axe-os/src/app/components/tooltip-icon/tooltip-icon.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, HostListener } from '@angular/core';
+
+@Component({
+  selector: 'tooltip-icon',
+  templateUrl: './tooltip-icon.component.html',
+  styleUrls: ['./tooltip-icon.component.scss'],
+})
+export class TooltipIconComponent {
+  @Input() tooltip: string = '';
+  @Input() size: string = 'xs';
+
+  showMobileTooltip = false;
+  tooltipIconClass = `pi pi-question-circle text-${this.size} pl-1 pr-2 tooltip-icon`;
+  isMobile = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
+}

main/http_server/axe-os/src/app/components/tooltip-text-icon/tooltip-text-icon.component.html

@@ -0,0 +1,19 @@
+<ng-container *ngIf="tooltip; else noTooltip">
+    <ng-container *ngIf="split; else noSplit">
+        <span *ngIf="preLastWords">{{ preLastWords }}&nbsp;</span>
+
+        <span class="white-space-nowrap">
+            {{ lastWord }}<tooltip-icon [tooltip]="tooltip" />
+        </span>
+    </ng-container>
+
+    <ng-template #noSplit>
+        <span class="white-space-nowrap">
+            {{ text }}<tooltip-icon [tooltip]="tooltip" />
+        </span>
+    </ng-template>
+</ng-container>
+
+<ng-template #noTooltip>
+    {{ text }}
+</ng-template>

main/http_server/axe-os/src/app/components/tooltip-text-icon/tooltip-text-icon.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TooltipTextIconComponent } from './tooltip-text-icon.component';
+
+describe('WifiIconComponent', () => {
+  let component: TooltipTextIconComponent;
+  let fixture: ComponentFixture<TooltipTextIconComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TooltipTextIconComponent]
+    });
+    fixture = TestBed.createComponent(TooltipTextIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

main/http_server/axe-os/src/app/components/tooltip-text-icon/tooltip-text-icon.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'tooltip-text-icon',
+  templateUrl: './tooltip-text-icon.component.html',
+})
+export class TooltipTextIconComponent implements OnChanges {
+  @Input() tooltip: string | null = '';
+  @Input() text: string | null = '';
+  @Input() split: boolean = true;
+
+  preLastWords: string = '';
+  lastWord: string = '';
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const safeText = (this.text ?? '').trim();
+
+    if ('text' in changes && safeText) {
+      const words = safeText.split(/\s+/);
+
+      if (words.length > 1) {
+        this.preLastWords = words.slice(0, words.length - 1).join(' ');
+        this.lastWord = words[words.length - 1];
+      } else {
+        this.preLastWords = '';
+        this.lastWord = safeText;
+      }
+    } else {
+      this.preLastWords = '';
+      this.lastWord = '';
+    }
+  }
+}

main/http_server/axe-os/src/app/layout/styles/layout/_utils.scss

@@ -27,6 +27,18 @@
     }
 }
 
+.p-tooltip-text {
+    font-size: 0.9rem;
+}
+
+.field.grid > label {
+    @media (min-width: 768px) {
+        align-items: baseline;
+        flex-direction: column;
+        justify-content: center;
+    }
+}
+
 .sensitive-data-hidden {
     [sensitive-data] {
         &.p-inputtext {

main/http_server/axe-os/src/app/layout/styles/layout/_variables.scss

@@ -1,4 +1,7 @@
 /* General */
-$scale:14px;                    /* main font size */ 
-$borderRadius:0px;             /* border radius of layout element e.g. card, sidebar */ 
-$transitionDuration:.2s;        /* transition duration of layout elements e.g. sidebar, overlay menus */ 
+$scale:14px;                    /* main font size */
+$borderRadius:0px;             /* border radius of layout element e.g. card, sidebar */
+$transitionDuration:.2s;        /* transition duration of layout elements e.g. sidebar, overlay menus */
+
+$tooltipBg: var(--surface-d);
+$borderRadius: 2px;