@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/tooltip/__snapshots__/tooltip.test.js.snap

@@ -0,0 +1,321 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip Component does not render when content is empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Tooltip Component renders with icon and icon size 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-tooltip ct-theme-light "
+    data-component-name="tooltip"
+  >
+    
+    
+    <button
+      class="ct-tooltip__button"
+      data-tooltip-button=""
+      data-tooltip-position=""
+    >
+      <svg
+        aria-hidden="true"
+        class="ct-icon ct-icon--size-large"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+
+        <path
+          d="M19.4097 13C19.1897 13 18.9597 12.93 18.7397 12.88C18.2945 12.7805 17.8568 12.6501 17.4297 12.49C16.9658 12.3212 16.4558 12.33 15.998 12.5146C15.5402 12.6992 15.1668 13.0466 14.9497 13.49L14.7297 13.95C13.7585 13.3992 12.8613 12.7271 12.0597 11.95C11.2825 11.1484 10.6105 10.2512 10.0597 9.28L10.5197 9.07C10.963 8.85292 11.3105 8.47953 11.4951 8.02169C11.6797 7.56385 11.6885 7.05391 11.5197 6.59C11.3609 6.15903 11.2306 5.71808 11.1297 5.27C11.0797 5.05 11.0397 4.82 11.0097 4.6C10.8882 3.89562 10.5193 3.25774 9.96931 2.80124C9.4193 2.34474 8.72438 2.09961 8.00968 2.11H4.99968C4.57693 2.10945 4.15883 2.19825 3.7728 2.37058C3.38677 2.54292 3.04152 2.7949 2.75968 3.11C2.472 3.43365 2.2578 3.81575 2.13179 4.23004C2.00577 4.64432 1.97094 5.08098 2.02968 5.51C2.57327 9.67214 4.47489 13.5387 7.43968 16.51C10.411 19.4748 14.2775 21.3764 18.4397 21.92C18.5695 21.9299 18.6999 21.9299 18.8297 21.92C19.5671 21.9211 20.2791 21.6505 20.8297 21.16C21.1448 20.8782 21.3968 20.5329 21.5691 20.1469C21.7414 19.7609 21.8302 19.3428 21.8297 18.92V15.92C21.8243 15.229 21.5805 14.5611 21.1396 14.0291C20.6987 13.4971 20.0876 13.1336 19.4097 13ZM19.8997 19C19.8994 19.1395 19.8698 19.2775 19.813 19.4049C19.7562 19.5324 19.6733 19.6465 19.5697 19.74C19.4601 19.8399 19.3297 19.9141 19.1878 19.9573C19.046 20.0006 18.8963 20.0117 18.7497 19.99C15.018 19.5026 11.5499 17.802 8.87968 15.15C6.20716 12.4775 4.49171 8.99737 3.99968 5.25C3.97796 5.10333 3.98912 4.95367 4.03236 4.81185C4.0756 4.67003 4.14983 4.5396 4.24968 4.43C4.3443 4.32515 4.46006 4.24154 4.58933 4.18466C4.7186 4.12778 4.85846 4.09892 4.99968 4.1H7.99968C8.23085 4.09435 8.45682 4.16898 8.63915 4.3112C8.82147 4.45341 8.94888 4.65442 8.99968 4.88C8.99968 5.15 9.08968 5.43 9.14968 5.7C9.26526 6.22386 9.419 6.73857 9.60968 7.24L8.20968 7.9C7.96905 8.01046 7.78204 8.21185 7.68968 8.46C7.58967 8.70346 7.58967 8.97654 7.68968 9.22C9.12888 12.3028 11.6069 14.7808 14.6897 16.22C14.9331 16.32 15.2062 16.32 15.4497 16.22C15.6978 16.1276 15.8992 15.9406 16.0097 15.7L16.6397 14.3C17.1556 14.4881 17.6834 14.6418 18.2197 14.76C18.4797 14.82 18.7597 14.87 19.0297 14.91C19.2553 14.9608 19.4563 15.0882 19.5985 15.2705C19.7407 15.4529 19.8153 15.6788 19.8097 15.91L19.8997 19ZM13.9997 2C13.7697 2 13.5297 2 13.2997 2C13.0345 2.02254 12.7891 2.14952 12.6175 2.353C12.4459 2.55647 12.3621 2.81978 12.3847 3.085C12.4072 3.35022 12.5342 3.59562 12.7377 3.76721C12.9412 3.93881 13.2045 4.02254 13.4697 4H13.9997C15.591 4 17.1171 4.63214 18.2423 5.75736C19.3675 6.88258 19.9997 8.4087 19.9997 10C19.9997 10.18 19.9997 10.35 19.9997 10.53C19.9775 10.7938 20.0609 11.0556 20.2314 11.2581C20.402 11.4606 20.6459 11.5871 20.9097 11.61H20.9897C21.24 11.611 21.4816 11.5181 21.6668 11.3496C21.8519 11.1811 21.9672 10.9493 21.9897 10.7C21.9897 10.47 21.9897 10.23 21.9897 10C21.9897 7.88 21.1482 5.84668 19.6501 4.34668C18.1519 2.84667 16.1197 2.00265 13.9997 2ZM15.9997 10C15.9997 10.2652 16.105 10.5196 16.2926 10.7071C16.4801 10.8946 16.7345 11 16.9997 11C17.2649 11 17.5193 10.8946 17.7068 10.7071C17.8943 10.5196 17.9997 10.2652 17.9997 10C17.9997 8.93913 17.5783 7.92172 16.8281 7.17157C16.078 6.42143 15.0605 6 13.9997 6C13.7345 6 13.4801 6.10536 13.2926 6.29289C13.105 6.48043 12.9997 6.73478 12.9997 7C12.9997 7.26522 13.105 7.51957 13.2926 7.70711C13.4801 7.89464 13.7345 8 13.9997 8C14.5301 8 15.0388 8.21071 15.4139 8.58579C15.789 8.96086 15.9997 9.46957 15.9997 10Z"
+        />
+        
+
+      </svg>
+      
+
+    </button>
+    
+
+    
+    <div
+      class="ct-tooltip__description"
+      data-tooltip-content=""
+    >
+      
+      
+      <div
+        class="ct-tooltip__description__inner"
+      >
+        Tooltip content
+      </div>
+      
+      
+      <div
+        data-tooltip-close=""
+      >
+        
+
+  
+        <button
+          class="ct-button ct-theme-light ct-button--tertiary ct-button--button ct-button--regular   "
+          data-component-name="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="ct-icon ct-button__icon"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            
+
+            <path
+              d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
+            />
+            
+
+          </svg>
+          
+
+        </button>
+        
+
+      </div>
+      
+
+      
+      <div
+        class="ct-tooltip__arrow"
+        data-tooltip-arrow=""
+      />
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Tooltip Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-tooltip ct-theme-dark custom-class"
+    data-component-name="tooltip"
+    data-test="true"
+  >
+    
+    
+    <button
+      aria-label="Tooltip title"
+      class="ct-tooltip__button"
+      data-tooltip-button=""
+      data-tooltip-position=""
+      title="Tooltip title"
+    >
+      <svg
+        aria-hidden="true"
+        class="ct-icon ct-icon--size-large"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+
+        <path
+          d="M19.4097 13C19.1897 13 18.9597 12.93 18.7397 12.88C18.2945 12.7805 17.8568 12.6501 17.4297 12.49C16.9658 12.3212 16.4558 12.33 15.998 12.5146C15.5402 12.6992 15.1668 13.0466 14.9497 13.49L14.7297 13.95C13.7585 13.3992 12.8613 12.7271 12.0597 11.95C11.2825 11.1484 10.6105 10.2512 10.0597 9.28L10.5197 9.07C10.963 8.85292 11.3105 8.47953 11.4951 8.02169C11.6797 7.56385 11.6885 7.05391 11.5197 6.59C11.3609 6.15903 11.2306 5.71808 11.1297 5.27C11.0797 5.05 11.0397 4.82 11.0097 4.6C10.8882 3.89562 10.5193 3.25774 9.96931 2.80124C9.4193 2.34474 8.72438 2.09961 8.00968 2.11H4.99968C4.57693 2.10945 4.15883 2.19825 3.7728 2.37058C3.38677 2.54292 3.04152 2.7949 2.75968 3.11C2.472 3.43365 2.2578 3.81575 2.13179 4.23004C2.00577 4.64432 1.97094 5.08098 2.02968 5.51C2.57327 9.67214 4.47489 13.5387 7.43968 16.51C10.411 19.4748 14.2775 21.3764 18.4397 21.92C18.5695 21.9299 18.6999 21.9299 18.8297 21.92C19.5671 21.9211 20.2791 21.6505 20.8297 21.16C21.1448 20.8782 21.3968 20.5329 21.5691 20.1469C21.7414 19.7609 21.8302 19.3428 21.8297 18.92V15.92C21.8243 15.229 21.5805 14.5611 21.1396 14.0291C20.6987 13.4971 20.0876 13.1336 19.4097 13ZM19.8997 19C19.8994 19.1395 19.8698 19.2775 19.813 19.4049C19.7562 19.5324 19.6733 19.6465 19.5697 19.74C19.4601 19.8399 19.3297 19.9141 19.1878 19.9573C19.046 20.0006 18.8963 20.0117 18.7497 19.99C15.018 19.5026 11.5499 17.802 8.87968 15.15C6.20716 12.4775 4.49171 8.99737 3.99968 5.25C3.97796 5.10333 3.98912 4.95367 4.03236 4.81185C4.0756 4.67003 4.14983 4.5396 4.24968 4.43C4.3443 4.32515 4.46006 4.24154 4.58933 4.18466C4.7186 4.12778 4.85846 4.09892 4.99968 4.1H7.99968C8.23085 4.09435 8.45682 4.16898 8.63915 4.3112C8.82147 4.45341 8.94888 4.65442 8.99968 4.88C8.99968 5.15 9.08968 5.43 9.14968 5.7C9.26526 6.22386 9.419 6.73857 9.60968 7.24L8.20968 7.9C7.96905 8.01046 7.78204 8.21185 7.68968 8.46C7.58967 8.70346 7.58967 8.97654 7.68968 9.22C9.12888 12.3028 11.6069 14.7808 14.6897 16.22C14.9331 16.32 15.2062 16.32 15.4497 16.22C15.6978 16.1276 15.8992 15.9406 16.0097 15.7L16.6397 14.3C17.1556 14.4881 17.6834 14.6418 18.2197 14.76C18.4797 14.82 18.7597 14.87 19.0297 14.91C19.2553 14.9608 19.4563 15.0882 19.5985 15.2705C19.7407 15.4529 19.8153 15.6788 19.8097 15.91L19.8997 19ZM13.9997 2C13.7697 2 13.5297 2 13.2997 2C13.0345 2.02254 12.7891 2.14952 12.6175 2.353C12.4459 2.55647 12.3621 2.81978 12.3847 3.085C12.4072 3.35022 12.5342 3.59562 12.7377 3.76721C12.9412 3.93881 13.2045 4.02254 13.4697 4H13.9997C15.591 4 17.1171 4.63214 18.2423 5.75736C19.3675 6.88258 19.9997 8.4087 19.9997 10C19.9997 10.18 19.9997 10.35 19.9997 10.53C19.9775 10.7938 20.0609 11.0556 20.2314 11.2581C20.402 11.4606 20.6459 11.5871 20.9097 11.61H20.9897C21.24 11.611 21.4816 11.5181 21.6668 11.3496C21.8519 11.1811 21.9672 10.9493 21.9897 10.7C21.9897 10.47 21.9897 10.23 21.9897 10C21.9897 7.88 21.1482 5.84668 19.6501 4.34668C18.1519 2.84667 16.1197 2.00265 13.9997 2ZM15.9997 10C15.9997 10.2652 16.105 10.5196 16.2926 10.7071C16.4801 10.8946 16.7345 11 16.9997 11C17.2649 11 17.5193 10.8946 17.7068 10.7071C17.8943 10.5196 17.9997 10.2652 17.9997 10C17.9997 8.93913 17.5783 7.92172 16.8281 7.17157C16.078 6.42143 15.0605 6 13.9997 6C13.7345 6 13.4801 6.10536 13.2926 6.29289C13.105 6.48043 12.9997 6.73478 12.9997 7C12.9997 7.26522 13.105 7.51957 13.2926 7.70711C13.4801 7.89464 13.7345 8 13.9997 8C14.5301 8 15.0388 8.21071 15.4139 8.58579C15.789 8.96086 15.9997 9.46957 15.9997 10Z"
+        />
+        
+
+      </svg>
+      
+
+    </button>
+    
+
+    
+    <div
+      class="ct-tooltip__description"
+      data-tooltip-content=""
+    >
+      
+      
+      <div
+        class="ct-tooltip__description__inner"
+      >
+        Tooltip content
+      </div>
+      
+      
+      <div
+        data-tooltip-close=""
+      >
+        
+
+  
+        <button
+          class="ct-button ct-theme-light ct-button--tertiary ct-button--button ct-button--regular   "
+          data-component-name="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="ct-icon ct-button__icon"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            
+
+            <path
+              d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
+            />
+            
+
+          </svg>
+          
+
+        </button>
+        
+
+      </div>
+      
+
+      
+      <div
+        class="ct-tooltip__arrow"
+        data-tooltip-arrow=""
+      />
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Tooltip Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-tooltip ct-theme-light "
+    data-component-name="tooltip"
+  >
+    
+    
+    <button
+      class="ct-tooltip__button"
+      data-tooltip-button=""
+      data-tooltip-position=""
+    >
+      <svg
+        aria-hidden="true"
+        class="ct-icon ct-icon--size-large"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+
+        <path
+          d="M12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071C12.8946 16.5196 13 16.2652 13 16V12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11ZM12.38 7.08C12.1365 6.97998 11.8635 6.97998 11.62 7.08C11.4973 7.12759 11.3851 7.19896 11.29 7.29C11.2017 7.3872 11.1306 7.49882 11.08 7.62C11.024 7.73868 10.9966 7.86882 11 8C10.9992 8.13161 11.0245 8.26207 11.0742 8.38391C11.124 8.50574 11.1973 8.61656 11.29 8.71C11.3872 8.79833 11.4988 8.86936 11.62 8.92C11.7715 8.98224 11.936 9.00632 12.099 8.99011C12.2619 8.97391 12.4184 8.91792 12.5547 8.82707C12.691 8.73622 12.8029 8.61328 12.8805 8.46907C12.9582 8.32486 12.9992 8.16378 13 8C12.9963 7.73523 12.8927 7.48163 12.71 7.29C12.6149 7.19896 12.5028 7.12759 12.38 7.08ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z"
+        />
+        
+
+      </svg>
+      
+
+    </button>
+    
+
+    
+    <div
+      class="ct-tooltip__description"
+      data-tooltip-content=""
+    >
+      
+      
+      <div
+        class="ct-tooltip__description__inner"
+      >
+        Tooltip content
+      </div>
+      
+      
+      <div
+        data-tooltip-close=""
+      >
+        
+
+  
+        <button
+          class="ct-button ct-theme-light ct-button--tertiary ct-button--button ct-button--regular   "
+          data-component-name="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="ct-icon ct-button__icon"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            
+
+            <path
+              d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
+            />
+            
+
+          </svg>
+          
+
+        </button>
+        
+
+      </div>
+      
+
+      
+      <div
+        class="ct-tooltip__arrow"
+        data-tooltip-arrow=""
+      />
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;

package/components/02-molecules/tooltip/tooltip.js

@@ -0,0 +1,143 @@
+/**
+ * CivicTheme Tooltip component.
+ */
+
+function CivicThemeTooltip(el) {
+  if (el.getAttribute('data-tooltip') === 'true') {
+    return;
+  }
+
+  this.el = el;
+  this.el.setAttribute('data-tooltip', 'true');
+  this.button = this.el.querySelector('[data-tooltip-button]');
+  this.content = this.el.querySelector('[data-tooltip-content]');
+  this.arrow = this.el.querySelector('[data-tooltip-arrow]');
+  this.close = this.el.querySelector('[data-tooltip-close]');
+  this.position = 'auto';
+
+  if (this.button) {
+    // Generate unique id for the tooltip content.
+    let prefix = 'tooltip';
+    do {
+      prefix += Math.floor(Math.random() * 10000);
+    } while (document.getElementById(prefix));
+    this.content.setAttribute('id', prefix);
+    this.button.setAttribute('aria-describedby', prefix);
+
+    this.position = this.button.getAttribute('data-tooltip-position') || 'auto';
+    this.button.addEventListener('click', this.tooltipShow.bind(this));
+    this.button.addEventListener('focusin', this.tooltipShow.bind(this));
+    this.button.addEventListener('focusout', this.tooltipHide.bind(this));
+    this.button.addEventListener('mouseenter', this.tooltipShow.bind(this));
+    this.button.addEventListener('mouseleave', this.tooltipHide.bind(this));
+    this.close.addEventListener('focusin', this.tooltipHide.bind(this));
+    this.close.addEventListener('click', this.tooltipHide.bind(this));
+  }
+
+  if (typeof Popper !== 'undefined') {
+    // Pass the button, the tooltip, and some options, and Popper will do the
+    // magic positioning for you:
+    this.el.popper = window.Popper.createPopper(this.button, this.content, {
+      placement: this.position,
+      modifiers: [
+        {
+          name: 'arrow',
+          options: {
+            element: this.arrow,
+            padding: 12,
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 36],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['top', 'bottom'],
+          },
+        },
+      ],
+    });
+  }
+}
+
+/**
+ * Show event handler.
+ */
+CivicThemeTooltip.prototype.tooltipShow = function (e) {
+  e.stopPropagation();
+  e.preventDefault();
+  e.stopImmediatePropagation();
+
+  const tooltip = this.findTooltip(e.target);
+  if (tooltip) {
+    tooltip.setAttribute('data-tooltip-visible', '');
+    tooltip.popper.update();
+  }
+};
+
+/**
+ * Hide event handler.
+ */
+CivicThemeTooltip.prototype.tooltipHide = function (e) {
+  e.stopPropagation();
+  e.preventDefault();
+  e.stopImmediatePropagation();
+
+  const tooltip = this.findTooltip(e.target);
+  if (tooltip) {
+    tooltip.removeAttribute('data-tooltip-visible');
+  }
+};
+
+/**
+ * Find button element.
+ */
+CivicThemeTooltip.prototype.findTooltip = function (el) {
+  if (el.classList.contains('ct-tooltip')) {
+    return el;
+  }
+  return el.closest('.ct-tooltip');
+};
+
+/**
+ * Destroy an instance.
+ */
+CivicThemeTooltip.prototype.destroy = function (el) {
+  if (el.getAttribute('data-tooltip') !== 'true' || !this.el) {
+    return;
+  }
+
+  const button = el.querySelector('[data-tooltip-button]');
+  const content = el.querySelector('[data-tooltip-content]');
+
+  // Exit early if button or content were not found.
+  if (!button || !content) {
+    return;
+  }
+
+  this.el = el;
+  this.button = button;
+  this.content = content;
+
+  // Remove any attached event listeners.
+  // eslint-disable-next-line no-self-assign
+  this.button.outerHTML = this.button.outerHTML;
+
+  // Mark as non-initialized.
+  this.el.setAttribute('data-tooltip', '');
+
+  delete this.el;
+  delete this.button;
+  delete this.content;
+  delete this.arrow;
+  delete this.close;
+  delete this.position;
+};
+
+document.querySelectorAll('.ct-tooltip').forEach((el) => {
+  new CivicThemeTooltip(el);
+});

package/components/02-molecules/tooltip/tooltip.scss

@@ -0,0 +1,165 @@
+//
+// CivicTheme Tooltip component styles.
+//
+
+@use 'sass:math';
+
+.ct-tooltip {
+  $root: &;
+
+  display: inline-block;
+  position: relative;
+
+  #{$root}__button {
+    appearance: none;
+    border: 0;
+    cursor: pointer;
+    position: relative;
+    background-color: transparent;
+    padding: 0;
+  }
+
+  #{$root}__description {
+    @include ct-typography('label-extra-small');
+    @include ct-elevation(2);
+
+    & {
+      display: flex;
+      align-items: center;
+      border-radius: var(--ct-tooltip-description-border-radius);
+      position: absolute;
+      width: var(--ct-tooltip-width-mobile);
+      min-height: calc(var(--ct-tooltip-width-mobile) / 2);
+      z-index: var(--ct-tooltip-z-index);
+    }
+
+    &[data-popper-placement^='top'] > [data-tooltip-arrow] {
+      bottom: calc(var(--ct-tooltip-triangle-width) * -1);
+      width: calc(var(--ct-tooltip-triangle-height) * 2);
+      height: var(--ct-tooltip-triangle-width);
+
+      &::before {
+        border-left: var(--ct-tooltip-triangle-height) solid transparent;
+        border-right: var(--ct-tooltip-triangle-height) solid transparent;
+        border-top: var(--ct-tooltip-triangle-width) solid;
+      }
+    }
+
+    &[data-popper-placement^='bottom'] > [data-tooltip-arrow] {
+      top: calc(var(--ct-tooltip-triangle-width) * -1);
+      width: calc(var(--ct-tooltip-triangle-height) * 2);
+      height: var(--ct-tooltip-triangle-width);
+
+      &::before {
+        border-left: var(--ct-tooltip-triangle-height) solid transparent;
+        border-right: var(--ct-tooltip-triangle-height) solid transparent;
+        border-bottom: var(--ct-tooltip-triangle-width) solid;
+      }
+    }
+
+    &[data-popper-placement^='left'] > [data-tooltip-arrow] {
+      right: calc(var(--ct-tooltip-triangle-width) * -1);
+      height: calc(var(--ct-tooltip-triangle-height) * 2);
+
+      &::before {
+        border-top: var(--ct-tooltip-triangle-height) solid transparent;
+        border-left: var(--ct-tooltip-triangle-width) solid;
+        border-bottom: var(--ct-tooltip-triangle-height) solid transparent;
+      }
+    }
+
+    &[data-popper-placement^='right'] > [data-tooltip-arrow] {
+      left: calc(var(--ct-tooltip-triangle-width) * -1);
+      height: calc(var(--ct-tooltip-triangle-height) * 2);
+
+      &::before {
+        border-top: var(--ct-tooltip-triangle-height) solid transparent;
+        border-right: var(--ct-tooltip-triangle-width) solid;
+        border-bottom: var(--ct-tooltip-triangle-height) solid transparent;
+      }
+    }
+
+    @include ct-breakpoint(m) {
+      width: var(--ct-tooltip-width);
+    }
+
+    [data-tooltip-close] {
+      margin-left: auto;
+      padding: ct-spacing() ct-spacing(2) ct-spacing() ct-spacing();
+      align-self: start;
+      cursor: pointer;
+    }
+  }
+
+  &:not([data-tooltip-visible]) {
+    #{$root}__description {
+      @include ct-visually-hidden();
+    }
+
+    #{$root}__arrow {
+      @include ct-visually-hidden();
+    }
+  }
+
+  #{$root}__description__inner {
+    padding: ct-spacing(3);
+  }
+
+  // Triangle.
+  #{$root}__arrow {
+    width: var(--ct-tooltip-triangle-width);
+    height: var(--ct-tooltip-triangle-height);
+    display: inline-block;
+    position: absolute;
+    z-index: -1;
+
+    &::before {
+      width: 0;
+      height: 0;
+      position: absolute;
+      z-index: var(--ct-tooltip-z-index);
+      content: '';
+      top: 0;
+      left: 0;
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    #{$root}__button {
+      @include ct-component-property($root, $theme, icon, color);
+
+      &:focus-visible {
+        @include ct-outline-theme($theme);
+      }
+    }
+
+    #{$root}__description {
+      @include ct-component-property($root, $theme, description, color);
+      @include ct-component-property($root, $theme, description, background-color);
+
+      &[data-popper-placement^='top'] > [data-tooltip-arrow] {
+        &::before {
+          border-top-color: ct-component-var($root, $theme, description, background-color);
+        }
+      }
+
+      &[data-popper-placement^='bottom'] > [data-tooltip-arrow] {
+        &::before {
+          border-bottom-color: ct-component-var($root, $theme, description, background-color);
+        }
+      }
+
+      &[data-popper-placement^='left'] > [data-tooltip-arrow] {
+        &::before {
+          border-left-color: ct-component-var($root, $theme, description, background-color);
+        }
+      }
+
+      &[data-popper-placement^='right'] > [data-tooltip-arrow] {
+        &::before {
+          border-right-color: ct-component-var($root, $theme, description, background-color);
+        }
+      }
+    }
+  }
+}

package/components/02-molecules/tooltip/tooltip.stories.js

@@ -0,0 +1,59 @@
+/**
+ * CivicTheme Tooltip component stories.
+ */
+
+import Component from './tooltip.twig';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'Molecules/Tooltip',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    position: {
+      control: { type: 'radio' },
+      options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'],
+    },
+    icon: {
+      control: { type: 'select' },
+      options: Constants.ICONS,
+    },
+    icon_size: {
+      control: { type: 'select' },
+      options: [
+        ...Object.keys(Constants.SCSS_VARIABLES['ct-icon-sizes-default']),
+        ...Object.keys(Constants.SCSS_VARIABLES['ct-icon-sizes']),
+      ],
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Tooltip = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    position: 'auto',
+    icon: Constants.ICONS[0],
+    icon_size: Object.keys(Constants.SCSS_VARIABLES['ct-icon-sizes-default'])[2],
+    title: 'Toggle tooltip display',
+    content: 'Ullamco incididunt laborum aliquip.',
+    modifier_class: '',
+    attributes: null,
+  },
+};