fix(material/tooltip): body line height affecting gap (angular#30164)

crisbeto · web-flow · commit c04f84fd3b81 · 2024-12-12T21:57:49.000+01:00
Fixes that the line height of the `body` element was affecting the gap between the tooltip and the trigger. Fixes angular#30132.
diff --git a/src/material/tooltip/tooltip.scss b/src/material/tooltip/tooltip.scss
@@ -98,9 +98,14 @@
   }
 }
 
-// We need the additional specificity here, because it can be overridden by `.cdk-overlay-panel`.
-.mat-mdc-tooltip-panel.mat-mdc-tooltip-panel-non-interactive {
-  pointer-events: none;
+.mat-mdc-tooltip-panel {
+  // The line height inherited from the body can throw off the tooltip gap (see #30132).
+  line-height: normal;
+
+  // We need the additional specificity here, because it can be overridden by `.cdk-overlay-panel`.
+  &.mat-mdc-tooltip-panel-non-interactive {
+    pointer-events: none;
+  }
 }
 
 @keyframes mat-mdc-tooltip-show {

Original file line number	Diff line number	Diff line change
`@@ -98,9 +98,14 @@`
`98`	`98`	`}`
`99`	`99`	`}`
`100`	`100`
`101`		-// We need the additional specificity here, because it can be overridden by `.cdk-overlay-panel`.
`102`		`-.mat-mdc-tooltip-panel.mat-mdc-tooltip-panel-non-interactive {`
`103`		`- pointer-events: none;`
	`101`	`+.mat-mdc-tooltip-panel {`
	`102`	`+ // The line height inherited from the body can throw off the tooltip gap (see #30132).`
	`103`	`+ line-height: normal;`
	`104`	`+`
	`105`	+ // We need the additional specificity here, because it can be overridden by `.cdk-overlay-panel`.
	`106`	`+ &.mat-mdc-tooltip-panel-non-interactive {`
	`107`	`+ pointer-events: none;`
	`108`	`+ }`
`104`	`109`	`}`
`105`	`110`
`106`	`111`	`@keyframes mat-mdc-tooltip-show {`