SHIBUI-954: Fixed the tooltip to append to container body and added a…

… column space on the right of the forms for better tooltip presentation;

ui/src/app/metadata/resolver/container/resolver-wizard.component.html

@@ -1,10 +1,12 @@
 <wizard (onNext)="next()" (onPrevious)="previous()" (onSave)="save()"></wizard>
 <hr />
 <div class="py-4">
-    <router-outlet></router-outlet>
+        <div class="col-11">
+            <router-outlet></router-outlet>
+        </div>
 </div>
 <wizard-summary
     [summary]="summary$ | async"
     (onPageSelect)="gotoPage($event)"
     *ngIf="currentPage === 'summary'">
-</wizard-summary>
+</wizard-summary>

ui/src/app/shared/component/info-icon.component.html

@@ -8,7 +8,8 @@
     [triggers]="triggers"
     [placement]="placement"
     [attr.aria-flowto]="id"
-    role="tooltip">
+    role="tooltip"
+    container="body">
     <i class="fa fa-fw fa-info-circle text-primary fa-lg"></i>
     <span class="sr-only" translate="tooltip.instruction"></span>
 </button>

ui/src/app/shared/component/info-icon.component.scss

@@ -6,8 +6,6 @@
         border: none;
         display: inline;
     }
+}
+
 
-    .popover .popover-body {
-        min-width: 160px;
-    }
-}

ui/src/app/shared/component/info-icon.component.ts

@@ -12,7 +12,8 @@ export class InfoIconComponent {
 
     id: string = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now().toString();
 
-    triggers = 'mouseenter:mouseleave focus:blur';
+    // triggers = 'mouseenter:mouseleave focus:blur';
+    triggers = 'click';
     container = 'body';
     placement = ['top'];