fix(tooltip): Fix tooltip display for small elements. Close #150

zalando · Mar 21, 2016 · c6d19c3 · c6d19c3
1 parent c0fd732
commit c6d19c3
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/docs/demo/materials/03-molecules/06-tooltip.html b/docs/demo/materials/03-molecules/06-tooltip.html
@@ -5,4 +5,4 @@
 
 <br><br>
 <h4 class="dc-h4">HAS TOOLTIP</h4>
-<button class="dc-btn dc-has-tooltip" data-dc-has-tooltip="Hi. I'm a tooltip.">This button has a tooltip</button>
+<button class="dc-btn dc-has-tooltip" data-dc-has-tooltip="Hi. I'm a tooltip.">Has tooltip</button>
diff --git a/src/styles/molecules/_tooltip.scss b/src/styles/molecules/_tooltip.scss
@@ -37,7 +37,9 @@
     display: block;
     position: absolute;
     bottom: calc(100% + 12px);
+    left: 0;
     content: attr(#{$content-attribute});
+    white-space: nowrap;
 }
 
 @mixin dc-tooltip__triangle--lb-has-tooltip {
@@ -110,4 +112,3 @@
         @include dc-has-tooltip;
     }
 }
-