fixed #9953 - use ng-bootstrap tooltips

tabby-core/src/components/appRoot.component.pug

@@ -35,7 +35,8 @@ title-bar(
                 [@animateTab]='{value: "in", params: {size: targetTabSize}}',
                 [@.disabled]='hasVerticalTabs() || !config.store.accessibility.animations',
                 (click)='app.selectTab(tab)',
-                [class.fully-draggable]='hostApp.platform !== Platform.macOS'
+                [class.fully-draggable]='hostApp.platform !== Platform.macOS',
+                [ngbTooltip]='tab.customTitle || tab.title'
             )
 
         .btn-group.background
@@ -43,7 +44,7 @@ title-bar(
                 *ngFor='let button of leftToolbarButtons'
             )
                 button.btn.btn-secondary.btn-tab-bar(
-                    [title]='button.label',
+                    [ngbTooltip]='button.label',
                     (click)='button.run && button.run()',
                     [fastHtmlBind]='button.icon'
                 )
@@ -55,7 +56,7 @@ title-bar(
             )
                 button.btn.btn-secondary.btn-tab-bar(
                     [hidden]='activeTransfers.length == 0',
-                    title='File transfers',
+                    [ngbTooltip]='"File transfers"|translate',
                     ngbDropdownToggle
                 ) !{require('../icons/transfers.svg')}
                 transfers-menu(
@@ -75,14 +76,14 @@ title-bar(
                 *ngFor='let button of rightToolbarButtons'
             )
                 button.btn.btn-secondary.btn-tab-bar(
-                    [title]='button.label',
+                    [ngbTooltip]='button.label',
                     (click)='button.run && button.run()',
                     [fastHtmlBind]='button.icon'
                 )
 
             button.btn.btn-secondary.btn-tab-bar.btn-update(
                 *ngIf='updatesAvailable',
-                title='Update available - Click to install',
+                [ngbTooltip]='"Update available - Click to install"|translate',
                 (click)='updater.update()'
             ) !{require('../icons/gift.svg')}
 

tabby-core/src/components/tabHeader.component.pug

@@ -13,7 +13,6 @@ profile-icon(
 )
 
 .name(
-    [title]='tab.customTitle || tab.title',
     [class.no-hover]='config.store.terminal.hideCloseButton && config.store.terminal.hideTabOptionsButton'
     cdkDrag,
     cdkDragRootElement='tab-header',

tabby-core/src/components/transfersMenu.component.pug

@@ -5,7 +5,7 @@
     .icon(*ngIf='isDownload(transfer)') !{require('../icons/download.svg')}
     .icon(*ngIf='!isDownload(transfer)') !{require('../icons/upload.svg')}
     .main
-        label.no-wrap([title]='transfer.getName()') {{transfer.getName()}}
+        label.no-wrap([ngbTooltip]='transfer.getName()') {{transfer.getName()}}
         ngb-progressbar([type]='transfer.isComplete() ? "success" : transfer.isCancelled() ? "danger" : "info"', [value]='getProgress(transfer)')
         .metadata
             .size {{transfer.getSize()|filesize}}

tabby-core/src/index.ts

@@ -2,7 +2,7 @@ import { NgModule, ModuleWithProviders, LOCALE_ID } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModule, NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap'
 import { NgxFilesizeModule } from 'ngx-filesize'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { TranslateModule, TranslateCompiler, TranslateService, MissingTranslationHandler } from '@ngx-translate/core'
@@ -155,6 +155,7 @@ export default class AppModule { // eslint-disable-line @typescript-eslint/no-ex
         platform: PlatformService,
         hotkeys: HotkeysService,
         commands: CommandService,
+        ngbTooltipConfig: NgbTooltipConfig,
         public locale: LocaleService,
         private translate: TranslateService,
         private profilesService: ProfilesService,
@@ -201,6 +202,10 @@ export default class AppModule { // eslint-disable-line @typescript-eslint/no-ex
                 commands.run('core:profile-selector', {})
             }
         })
+
+        ngbTooltipConfig.openDelay = 750
+        ngbTooltipConfig.placement = 'top bottom auto'
+        ngbTooltipConfig.container = 'body'
     }
 
     async showSelector (provider: ProfileProvider<Profile>): Promise<void> {