From 63a936968d013ed58c713fba58a63cf2bf7342da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ro=CC=81bert=20Kiss?= <ert78gb@gmail.com>
Date: Mon, 18 Jun 2018 23:30:27 +0200
Subject: [PATCH] feat: allow wider tooltip width than parent container

---
 .../src/app/components/popover/popover.component.html  |  2 +-
 .../src/app/directives/tooltip/tooltip.directive.ts    | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/uhk-web/src/app/components/popover/popover.component.html b/packages/uhk-web/src/app/components/popover/popover.component.html
index 879b2e1e..a5677231 100644
--- a/packages/uhk-web/src/app/components/popover/popover.component.html
+++ b/packages/uhk-web/src/app/components/popover/popover.component.html
@@ -95,7 +95,7 @@
                 <icon name="question-circle"
                       data-toggle="tooltip"
                       html="true"
-                      maxWidth="500"
+                      maxWidth="525"
                       title="<ul class='no-indent text-left'>
                 <li><strong>Default behavior</strong>: Remap the key on the the current layer of the current keymap.</li>
                 <li><strong>Remap on all keymaps</strong>: Remap key on the current layer of all keymaps.</li>
diff --git a/packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts b/packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts
index 4c717af6..42438353 100644
--- a/packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts
+++ b/packages/uhk-web/src/app/directives/tooltip/tooltip.directive.ts
@@ -47,15 +47,17 @@ export class TooltipDirective implements AfterContentInit, OnChanges {
     }
 
     private getCustomTemplate(): string {
-        let style = '';
+        let tooltipStyle = '';
+        let innerStyle = '';
 
         if (this.maxWidth) {
-            style = `style="max-width: ${this.maxWidth}px;"`;
+            tooltipStyle = `style="width: ${this.maxWidth}px;"`;
+            innerStyle = `style="max-width: ${this.maxWidth}px;"`;
         }
 
-        return `<div class="tooltip">
+        return `<div class="tooltip" ${tooltipStyle}>
             <div class="tooltip-arrow"></div>
-            <div class="tooltip-inner" ${style}></div>
+            <div class="tooltip-inner" ${innerStyle}></div>
         </div>`;
     }
 }