Hover Functionality in Page Block Table Salesforce

Example :
Apex Class :
public class HoverOnPageBockTable {  
    public List<Account> accList {get;set;}
    public HoverOnPageBockTable () {
        accList =[select id,name,phone from Account limit 5];
    }

}  
Visualforce Page:
<apex:page controller="HoverOnPageBockTable">
   <style>
    a:hover {
        background:#ffffff;
        text-decoration:none;
    }
    a.tooltip span {
        display:none;
        padding:2px 3px;
        margin-left:8px;
        width:250px;
    }
    a.tooltip:hover span{
        display:inline;
        position:absolute;
        background:#FFC;
        border:1px solid #cccccc;
        color:#000000;
    }
    </style>
    <apex:form >
        <apex:pageBlock >
        <apex:pageBlockTable value="{!accList}" var="acc" id="pb">
            <apex:column rendered="true">
                <a class="tooltip" target="_blank">{!acc.name}
                <span>
                        {!acc.Name} - {!acc.id}
                </span>
                </a></apex:column>
        </apex:pageBlockTable>
        </apex:pageblock>
    </apex:form>

</apex:page>
Output: