Merge pull request #16086 from twbs/fix-15925

Reset text/font properties more thoroughly for tooltips+popovers

less/mixins.less

@@ -11,6 +11,7 @@
 @import "mixins/responsive-visibility.less";
 @import "mixins/size.less";
 @import "mixins/tab-focus.less";
+@import "mixins/reset-text.less";
 @import "mixins/text-emphasis.less";
 @import "mixins/text-overflow.less";
 @import "mixins/vendor-prefixes.less";

less/mixins/reset-text.less

@@ -0,0 +1,18 @@
+.reset-text() {
+  font-family: @font-family-base;
+  // We deliberately do NOT reset font-size.
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: @line-height-base;
+  text-align: left; // Fallback for where `start` is not supported
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+}

less/popovers.less

@@ -11,22 +11,18 @@
   display: none;
   max-width: @popover-max-width;
   padding: 1px;
-  // Reset font and text properties given new insertion method
-  font-family: @font-family-base;
+  // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  .reset-text();
   font-size: @font-size-base;
-  font-weight: normal;
-  line-height: @line-height-base;
-  text-align: left;
+
   background-color: @popover-bg;
   background-clip: padding-box;
   border: 1px solid @popover-fallback-border-color;
   border: 1px solid @popover-border-color;
   border-radius: @border-radius-large;
   .box-shadow(0 5px 10px rgba(0,0,0,.2));
 
-  // Overrides for proper insertion
-  white-space: normal;
-
   // Offset the popover to account for the popover arrow
   &.top     { margin-top: -@popover-arrow-width; }
   &.right   { margin-left: @popover-arrow-width; }

less/tooltip.less

@@ -8,11 +8,11 @@
   position: absolute;
   z-index: @zindex-tooltip;
   display: block;
-  // Reset font and text properties given new insertion method
-  font-family: @font-family-base;
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  .reset-text();
   font-size: @font-size-small;
-  font-weight: normal;
-  line-height: 1.4;
+
   .opacity(0);
 
   &.in     { .opacity(@tooltip-opacity); }
@@ -28,7 +28,6 @@
   padding: 3px 8px;
   color: @tooltip-color;
   text-align: center;
-  text-decoration: none;
   background-color: @tooltip-bg;
   border-radius: @border-radius-base;
 }