Cannot see tooltip in iPhone in portrait mode

Question

I have used a span element to display my tooltip content by setting its visibility on hover and active. Here's my JSX and CSS:-

<text className={classNames(styles.iconInfo)}>&#9432;<span className={classNames(styles.tooltip)}>{t('order_id_tooltip')}</span></text>

.iconInfo .tooltip {
  visibility: hidden;
  width: auto;
  background-color: white;
  color: black;
  text-align: left;
  line-height: 20px;
  border-radius: 8px;
  padding: 8px;
  @include theme-aware('font-family', 'font-family');
  font-size: 16px;
  font-weight: normal;
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 10px);
  position: absolute;
  z-index: 1;
  margin-left: 12px;
  margin-top: -6px;
}

.iconInfo .tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent white transparent transparent;
}

.iconInfo:hover .tooltip, .iconInfo:active .tooltip {
  visibility: visible;
}

Now this implementation works for all web browsers on Mac and PC (Safari, Chrome etc.). It works on all tablets (you touch the tooltip icon to show the tooltip). It even works on iPhones but there's a catch: it works only in landscape mode, not portrait mode. I've tried on quite a few iPhones in both Safari and Chrome browsers, but it doesn't work.

I've gone through the solutions in Fix CSS hover on iPhone/iPad/iPod and https://dev.webonomic.nl/fixing-the-iphone-css-hover-problem-on-ios but they didn't work for me.

Any idea why this happens? I guess I should probably mention that I'm treating my page as a mobile screen with a media query: @media only screen and (max-width: 576px). When I rotate the iPhone to landscape, it shows the page in my tablet design, which is what I want. So, could this media query have an effect as well?

I'm using BrowserStack to emulate the devices.