Use popover for help component

3 files changed, 14 insertions, 29 deletions

diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index e37d93b62..2019a4988 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -13,6 +13,8 @@
 </ng-template>
 
 <span
-  class="help-tooltip-button" containerClass="help-tooltip" title="Click to get help"
-  #tooltipDirective="bs-tooltip" [tooltip]="tooltipTemplate" triggers="click"
+  class="help-tooltip-button"
+  [popover]="tooltipTemplate"
+  placement="right"
+  [outsideClick]="true"
 ></span>
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index b8bf3a7a5..0df8b86fa 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -12,20 +12,16 @@
 }
 
 /deep/ {
-  .help-tooltip {
-    opacity: 1 !important;
+  .popover-body {
+    text-align: left;
+    padding: 10px;
+    max-width: 300px;
 
-    .tooltip-inner {
-      text-align: left;
-      padding: 10px;
-      max-width: 300px;
-
-      font-size: 13px;
-      font-family: $main-fonts;
-      background-color: #fff;
-      color: #000;
-      box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-    }
+    font-size: 13px;
+    font-family: $main-fonts;
+    background-color: #fff;
+    color: #000;
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
 
     ul {
       padding-left: 20px;
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
index 89dd1dae5..9defd9aa4 100644
--- a/client/src/app/shared/misc/help.component.ts
+++ b/client/src/app/shared/misc/help.component.ts
@@ -1,6 +1,5 @@
-import { Component, ElementRef, HostListener, Input, OnInit, ViewChild, OnChanges } from '@angular/core'
+import { Component, Input, OnChanges, OnInit } from '@angular/core'
 import { MarkdownService } from '@app/videos/shared'
-import { TooltipDirective } from 'ngx-bootstrap/tooltip'
 
 @Component({
   selector: 'my-help',
@@ -9,7 +8,6 @@ import { TooltipDirective } from 'ngx-bootstrap/tooltip'
 })
 
 export class HelpComponent implements OnInit, OnChanges {
-  @ViewChild('tooltipDirective') tooltipDirective: TooltipDirective
   @Input() preHtml = ''
   @Input() postHtml = ''
   @Input() customHtml = ''
@@ -17,8 +15,6 @@ export class HelpComponent implements OnInit, OnChanges {
 
   mainHtml = ''
 
-  constructor (private elementRef: ElementRef) { }
-
   ngOnInit () {
     this.init()
   }
@@ -27,15 +23,6 @@ export class HelpComponent implements OnInit, OnChanges {
     this.init()
   }
 
-  @HostListener('document:click', ['$event.target'])
-  public onClick (targetElement) {
-    const clickedInside = this.elementRef.nativeElement.contains(targetElement)
-
-    if (this.tooltipDirective.isOpen && !clickedInside) {
-      this.tooltipDirective.hide()
-    }
-  }
-
   private init () {
     if (this.helpType === 'custom') {
       this.mainHtml = this.customHtml