Popovers/tooltips not showing up on radio input on iOS and MacOS

Created by: easypronunciation

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Affected browsers: mobile Safari/Chrome/Mozilla on iOS, Safari on MacOS

The code for popovers is the following:

<div class="mb-3">
  <label class="form-label">Choose English dialect (popover on radio input)</label>
  <div class="form-check">
    <input type="radio" class="form-check-input" name="dialect1z" id="dialect1z__1" value="us"  data-bs-html="true" data-bs-toggle="popover" data-bs-title="American English" data-bs-content="100,000 words" data-bs-placement="bottom" data-bs-trigger="focus" tabindex="0" required>
    <label class="form-check-label" for="dialect1z__1">American English</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" name="dialect1z" id="dialect1z__2" value="uk"  data-bs-html="true" data-bs-toggle="popover" data-bs-title="British English" data-bs-content="250,000 words" data-bs-placement="bottom" data-bs-trigger="focus" tabindex="0" required checked>
    <label class="form-check-label" for="dialect1z__2">British English</label>
  </div>
</div>

On Windows if I click on labels or use keyboard, I have the popovers showing up on "change". However in the affected browsers the popovers are not created.

The code for tooltips is the following:

<div class="mb-3">
  <label class="form-label">Choose English dialect (tooltip on radio input)</label>
  <div class="form-check">
    <input type="radio" class="form-check-input" name="dialect1y" id="dialect1y__1" value="us"  data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="100,000 words" data-bs-placement="bottom" required>
    <label class="form-check-label" for="dialect1y__1">American English</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" name="dialect1y" id="dialect1y__2" value="uk"  data-bs-html="true" data-bs-toggle="tooltip" data-bs-title="150,000 words" data-bs-placement="bottom" required checked>
    <label class="form-check-label" for="dialect1y__2">British English</label>
  </div>
</div>

The situation with the tooltips is very similar. They show up only if I click exactly on the radio input itself, but not on the label.

Reduced test cases

https://codepen.io/easypronunciation/pen/RwMzyJr

What operating system(s) are you seeing the problem on?

macOS, iOS

What browser(s) are you seeing the problem on?

Safari

What version of Bootstrap are you using?

5.1.3 / 5.2.0