How to add icons to checkout tags using Hooks? – WordPress

How can I add an icon next to the WooCommerce Checkout page Input tag, which when tapped shows a Tooltip with text?

How to edit checkout inputs with hooks in WooCommerce?

I want to add an icon inside the billing details, in the phone field input, which is billing_phone, in the WooCommerce checkout, so that when we touch it or hover over it, the Tooltip will display a text.

I can’t find the way to modify each input, I have seen that I can add elements before the Billing section with the Hook woocommerce_before_checkout_billing_form and after the Billing section with the following Hook woocommerce_after_checkout_billing_form

I EDIT THE QUESTION

With the help of @Mtxz , I managed to do tests and thanks to one of its functions, I managed to add the icon at checkout.

add_filter( 'woocommerce_form_field', 'add_code_to_checkout_phone_field', 10, 4 );

function add_code_to_checkout_phone_field( $field, $key, $args, $value ) {
    if ( $key === 'billing_phone' ) {
        $content = '<strong>
        <div class="colocandolo">
        <div class="tooltip top">
         <img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
          <span class="tiptext">
           Esto es un texto
            </span>
          </div>
        </div>
    </strong>';
$field = preg_replace('/</p>/', $content . '</p>', $field);
    }

    return $field;
}

the problem is that the icon is displayed at the top of the "Billing Details" form, below the title.
You can see it in the following image:

What do I need to change in the @Mtxz function so that the icon is displayed next to the "Phone" label?

I have tried this example to guide me in the creation of the function to achieve what I am looking for, but it does not work
Can I add icons to the Checkout form labels from the Hooks?

Why doesn’t the function I created work?
I’ve searched but I can’t find the right hook to add the icon that shows a Tooltip next to the input labels.
If this can’t be done using Hooks, and there isn’t a plugin that does it, maybe it can be done by editing a WooCommerce template, I imagine so.

What is the template that should be customized?

You can see what I’m looking for in any WooCommerce admin page, for example in wp-admin => settings => General .
All the fields have an icon that is a question mark and shows information in a Tooltip when we touch the icon.

I have also added a screenshot
https://ibb.co/5Y2k2PL

enter image description here

I have created a small demo with html and css, but I don’t know how I can get this implemented in WooCommerce

.colocandolo{
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
  justify-content: center;
}

.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted rgb(175, 76, 6); */
}
.tooltip .tiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgb(93, 69, 4);
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 6px 0;
  position: absolute;
  z-index: 1;
  box-shadow: 0 5px 10px rgb(93, 69, 4);
}
.tooltip .tiptext::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}
.tooltip:hover .tiptext {
  visibility: visible;
}

.tooltip.top .tiptext{
  margin-left: -60px;
  bottom: 150%;
  left: 50%;
}

.tooltip.top .tiptext::after{
  margin-left: -5px;
  top: 100%;
  left: 50%;
  border-color: rgb(93, 69, 4) transparent transparent transparent;
}

<div class="colocandolo"> 
    <div class="tooltip top">
     <img src="https://i.postimg.cc/ryJxTmp6/marron-Interro.png" width="20px"/>
      <span class="tiptext">
  This is the text that we should display
        </span>
      </div>
</div>