new plans page: refactor custom tooltip to bootstrap tooltip (#7972)

GitOrigin-RevId: d3552867a9e9176288803cadffacb5f3dab24895

services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug

@@ -28,10 +28,14 @@ include ./_mixins
 				autocomplete="off"
 			)
 			span
-		div.plans-v2-m-a-switch-annual-text-container
+		.plans-v2-m-a-switch-annual-text-container
 			span(data-ol-plans-v2-m-a-switch-annual-text) #{translate("annual")}
-			div.plans-v2-m-a-tooltip.plans-v2-m-a-tooltip-monthly(data-ol-plans-v2-m-a-tooltip)
+			.tooltip.in.right.plans-v2-m-a-tooltip(
-				div.plans-v2-m-a-tooltip-arrow
+				role="tooltip"
+				data-ol-plans-v2-m-a-tooltip
+			)
+				.tooltip-arrow
+				.tooltip-inner
 					span(data-ol-tooltip-period='monthly') #{translate("save_20_percent_by_paying_annually")}
 					span(hidden data-ol-tooltip-period='annual') #{translate("saving_20_percent")}
 

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-m-a-switch.js

@@ -68,9 +68,9 @@ export function enableMonthlyAnnualSwitching() {
 }
 
 export function hideMonthlyAnnualSwitchOnSmallScreen() {
-  const isSmallScreen = window.matchMedia('(max-width: 767px)').matches
+  const smallScreen = window.matchMedia('(max-width: 767px)').matches
 
-  if (isSmallScreen) {
+  if (smallScreen) {
     const el = document.querySelector('[data-ol-plans-v2-m-a-switch-container]')
 
     el.hidden = true
@@ -78,9 +78,9 @@ export function hideMonthlyAnnualSwitchOnSmallScreen() {
 }
 
 export function showMonthlyAnnualSwitchOnSmallScreen() {
-  const isSmallScreen = window.matchMedia('(max-width: 767px)').matches
+  const smallScreen = window.matchMedia('(max-width: 767px)').matches
 
-  if (isSmallScreen) {
+  if (smallScreen) {
     const el = document.querySelector('[data-ol-plans-v2-m-a-switch-container]')
 
     el.hidden = false
@@ -107,10 +107,7 @@ export function hideMonthlyAnnualTooltip() {
 function switchMonthlyAnnualTooltip() {
   const el = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
   if (currentMonthlyAnnualSwitchValue === 'annual') {
-    el.classList.replace(
+    el.classList.remove('plans-v2-m-a-tooltip-annual-selected')
-      'plans-v2-m-a-tooltip-annual',
-      'plans-v2-m-a-tooltip-monthly'
-    )
     document.querySelectorAll('[data-ol-tooltip-period]').forEach(childEl => {
       const period = childEl.getAttribute('data-ol-tooltip-period')
       if (period === 'monthly') {
@@ -120,10 +117,7 @@ function switchMonthlyAnnualTooltip() {
       }
     })
   } else {
-    el.classList.replace(
+    el.classList.add('plans-v2-m-a-tooltip-annual-selected')
-      'plans-v2-m-a-tooltip-monthly',
-      'plans-v2-m-a-tooltip-annual'
-    )
     document.querySelectorAll('[data-ol-tooltip-period]').forEach(childEl => {
       const period = childEl.getAttribute('data-ol-tooltip-period')
       if (period === 'annual') {
@@ -135,6 +129,17 @@ function switchMonthlyAnnualTooltip() {
   }
 }
 
+function changeMonthlyAnnualTooltipPosition() {
+  const smallScreen = window.matchMedia('(max-width: 767px)').matches
+  const el = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
+
+  if (smallScreen) {
+    el.classList.replace('right', 'bottom')
+  } else {
+    el.classList.replace('bottom', 'right')
+  }
+}
+
 // month and annual value will each have its own set of tables that we need to
 // switch accordingly
 function switchMonthlyAnnualTable() {
@@ -215,4 +220,7 @@ export function setUpMonthlyAnnualSwitching() {
       switchMonthlyAnnualTable()
       switchUnderlineText()
     })
+
+  changeMonthlyAnnualTooltipPosition()
+  window.addEventListener('resize', changeMonthlyAnnualTooltipPosition)
 }

services/web/frontend/stylesheets/app/plans-v2.less

@@ -196,19 +196,42 @@
   position: absolute;
   color: @white;
   width: auto;
-  height: 35px;
   padding: @padding-xs @padding-sm;
   border-radius: 4px;
-  left: 59px;
+  left: 100%;
-  top: -5px;
+  top: 0;
   z-index: @plans-v2-m-a-tooltip-z-index;
 
+  &.plans-v2-m-a-tooltip-annual-selected {
+    .tooltip-inner {
+      background-color: @ol-green;
+    }
+
+    .tooltip-arrow {
+      border-right-color: @ol-green;
+    }
+  }
+
   span {
     white-space: nowrap;
   }
 
   @media (max-width: @screen-xs-max) {
-    top: 36px;
+    left: -121%;
+    top: unset;
+
+    &.plans-v2-m-a-tooltip-annual-selected {
+      left: -33%;
+
+      .tooltip-inner {
+        background-color: @ol-green;
+      }
+
+      .tooltip-arrow {
+        border-right-color: unset;
+        border-bottom-color: @ol-green;
+      }
+    }
 
     span {
       font-size: @font-size-extra-small;
@@ -217,56 +240,6 @@
   }
 }
 
-.plans-v2-m-a-tooltip-monthly {
-  background-color: rgba(0, 0, 0, 0.9);
-
-  .plans-v2-m-a-tooltip-arrow {
-    background-color: rgba(0, 0, 0, 0.9);
-  }
-
-  @media (max-width: @screen-xs-max) {
-    left: -86px;
-
-    .plans-v2-m-a-tooltip-arrow {
-      left: 102px;
-    }
-  }
-}
-
-.plans-v2-m-a-tooltip-annual {
-  background-color: @ol-green;
-
-  .plans-v2-m-a-tooltip-arrow {
-    background-color: @ol-green;
-  }
-
-  @media (max-width: @screen-xs-max) {
-    left: -27px;
-
-    .plans-v2-m-a-tooltip-arrow {
-      left: 43px;
-    }
-  }
-}
-
-.plans-v2-m-a-tooltip-arrow {
-  background-color: rgba(0, 0, 0, 0.9);
-  position: absolute;
-  left: -4px;
-  top: 14px;
-  width: 8px;
-  height: 8px;
-  transform: rotate(45deg);
-  // hide the arrow behind the tooltip text
-  z-index: @plans-v2-m-a-tooltip-arrow-z-index;
-
-  @media (max-width: @screen-xs-max) {
-    width: 18px;
-    height: 18px;
-    top: -9px;
-  }
-}
-
 .page-header.top-page-header {
   // remove page-header border & margin on mobile
   @media (max-width: @screen-xs-max) {