🐛 Fix tooltip and timeline alignment issues

Author: Frontendland

src/components/Timeline/timeline.module.scss

@@ -28,11 +28,11 @@ body {
         left: $leftOffset
     }
 
-    &.fill li::before {
+    &.fill > li::before {
         content: '';
     }
 
-    &.stroke li::before {
+    &.stroke > li::before {
         @include background(primary-70);
         border: 2px solid var(--w-timeline-color);
     }
@@ -47,7 +47,7 @@ body {
                 left: calc(50% - 1px);
             }
 
-            li {
+            > li {
                 @include size('w50%');
 
                 &:nth-child(odd) {
@@ -69,7 +69,7 @@ body {
             }
         }
 
-        &.centered li:nth-child(odd) {
+        &.centered > li:nth-child(odd) {
             @include typography(right);
         }
     }

src/pages/tooltip.astro

@@ -14,13 +14,13 @@ const tooltipStyle = [
     <h1>Tooltip</h1>
     <div class="grid md-2 lg-3">
         <ComponentWrapper title="Default">
-            <p data-tooltip="Tooltip content">Default tooltip</p>
+            <span data-tooltip="Tooltip content">Default tooltip</span>
         </ComponentWrapper>
 
         <ComponentWrapper title="Custom color">
-            <p data-tooltip="Tooltip content" style={tooltipStyle}>
+            <span data-tooltip="Tooltip content" style={tooltipStyle}>
                 Colored tooltip
-            </p>
+            </span>
         </ComponentWrapper>
 
         <ComponentWrapper title="Tooltip on button">
@@ -30,21 +30,21 @@ const tooltipStyle = [
         </ComponentWrapper>
 
         <ComponentWrapper title="Bottom position">
-            <p data-tooltip="Tooltip content" data-position="bottom">
+            <span data-tooltip="Tooltip content" data-position="bottom">
                 Bottom tooltip
-            </p>
+            </span>
         </ComponentWrapper>
 
         <ComponentWrapper title="Left position">
-            <p data-tooltip="Tooltip content" data-position="left">
+            <span data-tooltip="Tooltip content" data-position="left">
                 Left tooltip
-            </p>
+            </span>
         </ComponentWrapper>
 
         <ComponentWrapper title="Right position">
-            <p data-tooltip="Tooltip content" data-position="right">
+            <span data-tooltip="Tooltip content" data-position="right">
                 Right tooltip
-            </p>
+            </span>
         </ComponentWrapper>
     </div>
 </Layout>

src/scss/global/tooltip.scss

@@ -8,6 +8,8 @@
 
     [data-tooltip] {
         @include position(relative);
+        @include typography(normal);
+
         display: inline-block;
 
         &::before,
@@ -94,7 +96,7 @@
                 @include border(5px, top, transparent);
                 @include border(5px, bottom, transparent);
 
-                top: calc(50% - 2.5px);
+                top: calc(50%);
                 border-left: 5px solid var(--w-tooltip-background);
                 transform: translate(10px, -50%);
             }
@@ -123,7 +125,7 @@
                 @include border(5px, top, transparent);
                 @include border(5px, bottom, transparent);
 
-                top: calc(50% - 2.5px);
+                top: calc(50%);
                 border-right: 5px solid var(--w-tooltip-background);
                 transform: translate(-10px, -50%);
             }