I've been tasked with editing a pre-existing web page, and I'm currently dissecting some code within it. The specific item under scrutiny is a list element containing a span. Interestingly, this span solely possesses a class attribute, lacking any alt text or title.
<span class="ui-icon ui-icon-info"></span>
The classes ui-icon and ui-icon-info are affiliated with JqueryUI. Consequently, they render an information icon as a background image within the span. Reviewing the CSS, there doesn't appear to be anything extraordinary about it:
.ui-icon-info { background-position: -16px -144px; }
.ui-icon { width: 16px; height: 16px; background-image: url(ui-icons_72a7cf_256x240.png); }
.ui-icon { text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
Upon hovering over the icon, it triggers a div to display as a tooltip:
<div class="tooltip" style="position: absolute; top: 661px; left: 710px; opacity: 0.8; display: none;">Some Tooltip Text</div>
The tooltip's CSS doesn't seem to possess any unique characteristics, just standard formatting details. Given the presence of multiple span elements within the list, it's perplexing how Jquery identifies the appropriate div to showcase as the tooltip. Could someone kindly explain how Jquery determines the correct div for displaying the tooltip of a span element?