Stacked Tooltips for acmart Authorinfo

[Xaldew]

In the following test file:

\documentclass[acmsmall,screen]{acmart}
\citestyle{acmauthoryear}

\begin{document}

\author{John Doe}%
 \authornote{Both authors contributed equally to this research.}%
 \email{[email protected]}%
 \orcid{0000-0000-0000-0000}%

\author{Jane Doe}%
 \authornotemark[1]%
 \email{[email protected]}%
 \affiliation{%
   \institution{Institute for Clarity in Documentation}%
   \streetaddress{P.O. Box 1212}%
   \city{Dublin}%
   \state{Ohio}%
   \country{USA}%
   \postcode{43017-6221}%
 }%

 \affiliation{%
   \institution{Main University, Department of Computing}%
   \city{SecondTown}%
   \country{SecondCountry}%
 }%

\title{Test Title}

\maketitle

\end{document}

The generated tooltips for the 'author-info' for the 'acmart' seems to all get stacked on-top of eachother:

A quick look at the output HTML and CSS:

        <div class="ltx_authors">
          <span class="ltx_creator ltx_role_author">
            <span class="ltx_personname">John Doe
            </span><span class="ltx_author_notes">
              <span class="ltx_contact ltx_role_email"><a href="mailto:[email protected]">[email protected]</a>
              </span>
              <span class="ltx_contact ltx_role_orcid"><a href="https://orcid.org/0000-0000-0000-0000"
                  title="ORCID identifier" class="ltx_ref">0000-0000-0000-0000</a></span>
            </span></span>
          <span class="ltx_author_before"> and </span><span class="ltx_creator ltx_role_author">
            <span class="ltx_personname">Jane Doe
            </span><span class="ltx_author_notes">
              <span class="ltx_contact ltx_role_email"><a href="mailto:[email protected]">[email protected]</a>
              </span>
              <span class="ltx_contact ltx_role_affiliation"><span
                  class="ltx_text ltx_affiliation_institution">Institute for Clarity in Documentation</span><span
                  class="ltx_text ltx_affiliation_streetaddress">P.O. Box 1212</span><span
                  class="ltx_text ltx_affiliation_city">Dublin</span><span
                  class="ltx_text ltx_affiliation_state">Ohio</span><span
                  class="ltx_text ltx_affiliation_country">USA</span><span
                  class="ltx_text ltx_affiliation_postcode">43017-6221</span>
              </span>
              <span class="ltx_contact ltx_role_affiliation"><span class="ltx_text ltx_affiliation_institution">Main
                  University, Department of Computing</span><span
                  class="ltx_text ltx_affiliation_city">SecondTown</span><span
                  class="ltx_text ltx_affiliation_country">SecondCountry</span>
              </span></span></span>
        </div>

.ltx_authors_1line .ltx_author_notes:before { content:"*"; color:blue;}
.ltx_authors_1line .ltx_author_notes span { display:none; }
.ltx_authors_1line .ltx_author_notes:hover span {
    display:block; position:absolute; z-index:10;
    background:white; text-align:left;
    border: 1px solid black; border-radius: 0 5px 5px 5px; box-shadow: 5px 5px 10px gray;
}

I am admittedly not much of web-programmer, but it looks like all spans get activated by this rule separately. It's probably better to try to gather all of these lines into a single block/tooltip, somehow