How is does Jquery display a tooltip on this span element?


Tags: jquery,html,css,jquery-ui

Problem :

I've been asked to edit a web page that I didn't create and I'm trying to understand some code in it. I have a list item that contains a span. The span only has a class attribute, no alt text or title.

<span class="ui-icon ui-icon-info"></span>

The ui-icon and ui-icon-info classes are from JqueryUI. They display a information icon as a background image for the span. I don't see anything else special about the css:

.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; }

When a user hovers over the icon it displays a div as a tooltip:

<div class="tooltip" style="position: absolute; top: 661px; left: 710px; opacity: 0.8; display: none;">Some Tooltip Text</div>

The css for tooltip also doesn't look to be anything special. Just some formatting info. There are several of these span elements in the list and I can't figure out how it is choosing the correct div to display in the tooltip. Can someone please tell me how Jquery selects the correct div to display for the tooltip of a span element?



Solution :

There is a function called loadReportFunctions() where it perfoms an ajax request and calls to the function formatLinks(links) . There it plays with the properties of the span.ui-icon elements.

Chrome Resources Screenshot


    CSS Howto..

    How to reverse jQuery css styling?

    How can I get some padding between these form boxes?

    CSS how to keep text always inline with a paragraph

    how to fit the background image to the containing anchor element?

    Dropdown list doesn't show up, what am i doing wrong

    Please help me understand how to make my first jquery slider

    How to display search icon on right side through css?

    how to display php search engine execution time and number of results before the results

    css transform. How to get rotation degree value from “matrix( 0, 1, -1, 0, 0, 0”)?

    How to implement a version of css?

    how to remove xlink default styling

    How to change background color for only one bootstrap popover

    How to add a line break
    in
    in HTML

    How to Style Similar to an Exam Questi-n

    How to stop text in div pushing other divs down the page?

    how to change style of a css element using jQuery

    How to get content of particular column of html page after split using css-rule(-webkit-column-width:)

    How do I put a box around my Flot graph?

    CSS how to scale on the bottom instead of the top of an image

    How to separate Text and HTML with CSS

    How to add border to a container with transparent gaps in between

    How to get CSS attributes assigned to a html table?

    CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

    How to style dropdown menu using CSS in HTML

    How to set the id of a 'label' HTML element?

    How to make irregularly-shaped SVGs overlap while maintaining all areas clickable?

    django render_to_response how to send special characters

    How to reference a Div after each h3

    How to explain CSS Float in general language?

    Show/hide
  • by jQuery