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>`;
     }
 }