How to show tooltip for fields on woocommerce?

Question

css

The styles that bother me are written in html through style:

<span class="description" id="billing_discord-description" aria-hidden="true" style="display: inline;">Наш оператор свяжется в течение 10 минут</span>

By default display: none, on click display: inline. But for some reason, the description is displayed crookedly from the box.

To fix this, you need to replace display: inlinewith display: -webkit-inline-box. This can be done through an identifier, but then the whole logic of work is strewed, because default is now displayed display: -webkit-inline-boxinstead of display: none.
I came to the conclusion that it makes no sense to fight with styles here, because. it is not possible to set the location where style is output in html. (if not right, then correct)
The most logical way to change the logic of work to the correct one is to change aria-hidden="true" to aria-hidden="false" by default. The only question is how to do it?

Answer 1

js is our everything