diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss
index a6d61ba2..2790ff09 100644
--- a/scss/components/_tooltip.scss
+++ b/scss/components/_tooltip.scss
@@ -9,7 +9,7 @@
   #{$parent-selector} [data-tooltip] {
     position: relative;
 
-    &:not(a, button, input, [role="button"]) {
+    &:not(:has(a, button, input, [role="button"])):not(a, button, input, [role="button"]) {
       border-bottom: 1px dotted;
       text-decoration: none;
       cursor: help;
@@ -19,11 +19,13 @@
     &[data-placement="top"]::after,
     &::before,
     &::after {
-      display: block;
+      display: inline-block;
       z-index: 99;
       position: absolute;
       bottom: 100%;
       left: 50%;
+      width: max-content;
+      max-width: 250px;
       padding: 0.25rem 0.5rem;
       overflow: hidden;
       transform: translate(-50%, -0.25rem);
@@ -34,9 +36,10 @@
       font-style: normal;
       font-weight: var(#{$css-var-prefix}font-weight);
       font-size: 0.875rem;
+      text-align: center;
       text-decoration: none;
       text-overflow: ellipsis;
-      white-space: nowrap;
+      white-space: normal;
       opacity: 0;
       pointer-events: none;
     }
@@ -44,6 +47,7 @@
     // Caret
     &[data-placement="top"]::after,
     &::after {
+      width: 0;
       padding: 0;
       transform: translate(-50%, 0rem);
       border-top: 0.3rem solid;
@@ -205,6 +209,7 @@
         50% {
           opacity: 0;
         }
+
         to {
           transform: var(#{$css-var-prefix}tooltip-caret-slide-to);
           opacity: 1;