function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Lee SinLee Sin 

Datatable row hover event?

Hi, 
I am created a datatable on VF page which displays the subjects of a custom object instances.
I want to display the body of the instance  on a small pop up window when the mouse hover on a specific row. 

What are the basic steps to realize this or can I get some sample code on this ?

Thanks in advance!
GauravGGauravG
You can use the same for your functionality.

<apex:page standardController="Account">
    <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:pageBlock title="Hello {!$User.FirstName}!">
      You are viewing the {!account.name} account.
   </apex:pageBlock>
   <apex:pageBlock title="Contacts">
       <apex:dataTable value="{!account.Contacts}" var="contact">
           <apex:column ><a class="tooltip">{!contact.Name}<span>{!contact.MailingCity}</span></a></apex:column>
           <apex:column value="{!contact.Phone}"></apex:column>                     
       </apex:dataTable>
</apex:pageBlock>
</apex:page>
Lee SinLee Sin
GauravG,
This works good.
But if the field  {!contact.MailingCity} is a rich text field.
The html tags are displayed as text on hover.

Is there a way to overcome this?