Радиокнопка должна быть нажата дважды

Question

Я строю всплывающую подсказку вокруг радиокнопки (цвета постельного белья) в качестве элемента div, и теперь мне нужно дважды щелкнуть, чтобы активировать радиокнопку на мобильном телефоне (iPhone).

Сайт: https://vitapacks.co.uk/?_ab=0&_fd=0&_sc=1&preview_theme_id=73385214045

Я нашел другой веб-сайт с точно такой же HTML-структурой, и он работает: https://woolsofwanaka.co.nz/collections/scarves/products/0255ribscarf?variant=36689048658

Я пытался изменить свой HTML, а также написать фрагмент кода JS, который просто фокусируется на мобильном поле ввода после нажатия на div, но это не сработало.

    <div id="tooltipdbl" class="tooltip">

<input type="radio"
                                {% if option.selected_value == value %} checked="checked"{% endif %}
                                {% unless variant_label_state %} disabled="disabled"{% endunless %}
                                value="{{ value | escape }}"
                                data-index="option{{ option_index }}"
                                name="{{ option.name | handleize }}"
                                class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
                                id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
                              
<label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
<span class="tooltiptext">{{ value | escape }}</span> 
</div>