Java Development Tools

I have link with icon image. I want to show tool tip text for that link on mouse hover.

How can i achieve this ?

Is there any attribute ?

how can i do it with javascript and css ?

I did this with css but tool tip is overriding by another component .

This is the code i have written.

<af:link icon="/images/crc_icons/logistics.png" inlineStyle="background-color:#0f5a49;" id="l6"

                             rendered="#{not empty sessionScope.PM}" hoverIcon="/images/crc\_icons/logistics.png"

                         styleClass="tileIcon tooltip" text="Project Management"/>  

.tooltip:hover span {

opacity: 1;

visibility: visible;

}

.tooltip span {

left:-40px;

min-width: 75px;

max-width: 150px;

background-color: #000000;

color: #FFFFFF;

height: auto;

border-radius: 5px;

opacity: 0;

position:fixed;

visibility: hidden;

word-wrap: break-word;

-webkit-transition: all 0.5s;

   -moz-transition: all 0.5s;

    -ms-transition: all 0.5s;

     -o-transition: all 0.5s;

        transition: all 0.5s;   

}

In the below image i need tool tip for green color icon. Tool tip is coming but it is overriding by beside table component.