Adding anchor tag to custom tooltip box

Question

I have created a custom tooltip using css styling (see below code).
I want to add a anchor tag

<a href="google.com">Counts (data-tooltip)</a>

to the tooltip, when I hover to "Hover at Me" it show me Counts (which is currently showing), and when I click on Counts it will open google.com. How can I add this functionality with current code?

In HTML

<div class="avatar" data-tooltip="Counts">Hover at Me </div>


.avatar::before,

.avatar::after{

    --scale: 0; 

    --arrow-size: 10px;    

    --tooltip-color: #20304c; 

    position: absolute; 

    left: 50%;

    top: .5rem;
    transform: translateX(-50%) translateY(var(--translate-y,0)) scale(var(--scale));

    transition: 50ms transform;
    transform-origin: bottom center;

}
.avatar::before{
    --translate-y: calc(-100% - var(--arrow-size));
    content: attr(data-tooltip);
    /* width: max-content ; */
    /* max-width: 100%; */
    /* bottom: -.25rem; */
    background-color: var(--tooltip-color);    
}
.avatar:hover::before, .avatar:hover::after{
    --scale: 1;
}
.avatar::after{
    --translate-y: calc(-1*var(--arrow-size));
    height: 10px;
    width: 10px;
    border: var(--arrow-size) solid transparent;
    border-bottom-color: var(--tooltip-color);
    background-color: black;
    transform-origin: bottom center;        
}