Can I add a custom tooltip that appears on hover to different SVG elements?

I made an SVG graphic that is divided by rectangles and vectors and each of them links to a website and changes color onhover. I want to add custom tooltips that appear with the name of what each element on the svg graphic is linking to next to the mouse on hover.

I’ve tried a couple of solutions with CSS and Javascript but none of them work except for adding <title> to each element within the SVG, but that’s not really what I’m looking for. Any tips for styling the tooltip per each element?

Below is the code and a mock-up of what I’m trying to achieve.

  <svg width="2100" height="2100" viewBox="0 0 243 381" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="pixelgirl">
    
           
            <a href="https://www.girlunline.com" class="GSCORE1">
            <g id="GSCORE1">
            <rect id="Rectangle 114" width="81" height="27" transform="matrix(-1 0 0 1 162 151)" fill="black"/>
            </g>
            </a>

            <a href="https://www.girlunline.com" class="GSCORE2">
            <g id="GSCORE2">
            <rect id="Rectangle 71" width="27" height="54" transform="matrix(-1 0 0 1 81 178)" fill="black"/>
            </g>
            </a>

            <a href="https://www.girlunline.com" class="GSCORE3">
            <g id="GSCORE3">
            <rect id="Rectangle 59" width="27" height="54" transform="matrix(-1 0 0 1 54 232)" fill="black"/>
            </g>
            </a>

            <a href="https://www.girlunline.com" class="GSCORE4">
            <g id="GSCORE4">
            <rect id="Rectangle 65" width="27" height="68" transform="matrix(-1 0 0 1 27 286)" fill="black"/>
            </g>
            </a>

            <a href="https://www.girlunline.com" class="GSCORE5">
            <g id="GSCORE5">
            <path id="Vector 3" d="M27 354V327H216V354H176V381H149V354H91V381H64V354H27Z" fill="black"/>
            </g>
            </a>

            <a href="https://www.girlunline.com" class="GSCORE6">
            <g id="GSCORE6">
            <rect id="Rectangle 179" width="27" height="68" transform="matrix(-1 0 0 1 243 286)" fill="black"/>
            </g>
            </a> 
    
            <a href="https://www.are.na/isabelle-rosadocue/channels" class="GSCORE7">
            <g id="GSCORE7">
            <rect id="Rectangle 75" width="27" height="54" transform="matrix(-1 0 0 1 216 232)" fill="black"/>
            </g>
            </a>
        
            <a href="https://www.girlunline.com" class="GSCORE8">
            <g id="GSCORE8">
            <rect id="Rectangle 73" width="27" height="54" transform="matrix(-1 0 0 1 189 178)" fill="black"/>
            </g>
            </a>
    
            <a href="https://www.girlunline.com" class="GSCORE9">
            <g id="GSCORE9">
            <g id="Vector">
            <path id="Vector 1" d="M13.5 161V135.5H26V108.5H53.5V135.5H41V161H13.5Z" fill="black" />
            </g>
            <path id="Vector 2" d="M227 162H200V135H188V108H215V135H227V162Z" fill="black" />
            </g>
            </a>

            <a href="https://www.girlunline.com" class="GSCORE10">
            <g id="GSCORE10">
            <rect id="Rectangle 100" width="81" height="27" transform="matrix(-1 0 0 1 162 108)" fill="black"/>
            </g>
            </a>
    
            <a href="https://www.girlunline.com" class="GSCORE11">
            <g id="GSCORE11">
            <rect id="Rectangle 108" width="27" height="81" transform="matrix(-1 0 0 1 189 27)" fill="black"/>
            </g>
            </a>

            <a href="https://www.girlunline.com" class="GSCORE12">
            <g id="GSCORE12">
            <rect id="Rectangle 112" width="81" height="27" transform="matrix(-1 0 0 1 162 0)" fill="black"/>
            </g>
            </a>
    
            <a href="https://www.girlunline.com" class="GSCORE13">
            <g id="GSCORE13">
            <rect id="Rectangle 103" width="27" height="81" transform="matrix(-1 0 0 1 81 27)" fill="black"/>
            </g>
            </a>

            <a href="https://www.girlunline.com" class="HFILL">
            <g id="HFILL">
            <rect width="81" height="81" transform="matrix(-1 0 0 1 162 27)" fill="white"/>
            <rect width="81" height="81" transform="matrix(-1 0 0 1 162 27)" fill="white"/>
            </g>
            </a>

            <a href="https://www.girlunline.com" class="DFILL">
            <g id="DFILL">
            <path id="Vector 4" d="M27 286V327H216V286H189V232H162V178H81V232H54V286H27Z" fill="white"/>
            </g>
            </a>
            </g>
            </svg>

* {
    background-color: #f700ff;
    margin: 0;
    padding: 0;
    bottom: 50%;
    font-family: 'JetBrains Mono', monospace;
}

body {
    display:flex;
    justify-content: center;
    align-items: center;
}

p {
    font-size: 50rem
}

text {
    font-size: 5rem;
}

.pixelgirl1 {
    display: block;
    margin: auto;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
}


/* 1 */

.GSCORE1 rect:hover {
    fill:#FF0000
}

/* 2 */

.GSCORE2 rect:hover {
    fill:#FF0000
}


/* 3 */

.GSCORE3 rect:hover {
    fill:#FF0000;
}


/* 4 */

.GSCORE4 rect:hover {
    fill:#FF0000
}


/* 5 */

.GSCORE5 path:hover {
    fill: #FF0000;
}

/* 6 */

.GSCORE6 rect:hover{
    display:block;
    fill: #FF0000;
}



  /* 7 */

.GSCORE7 rect:hover {
    fill:#FF0000
}


/* 8 */

.GSCORE8 rect:hover {
    fill:#FF0000
}


/* 9 */

.GSCORE9 path:hover {
    fill:#FFCEFA;
}


/* 10 */

.GSCORE10 rect:hover {
    fill:#FF0000;
}


/* 11 */

.GSCORE11 rect:hover {
    fill:#FF0000;
}



/* 12 */

.GSCORE12 rect:hover {
    fill:#FF0000;
}



/* 13 */

.GSCORE13 rect:hover {
    fill:#FF0000;
}



/* hfill */

.HFILL rect:hover {
    fill:#FFCEFA;
}



/* dfill */

.DFILL path:hover {
    fill:#FFCEFA
}