0

I have a datatable with css overflow : hidden. Now for big digit numbers, I want for a particular column, 15th here, enable on hover show value using tooltip. The hover part is working fine and showing the value but the outputfield itself is not showing any value. here is the style used :

td:nth-child(15):hover {
  background: #e1f1f7;
} /*BG color is a must for IE6*/

td:nth-child(15).tooltip span {
  display:none; width:100px;
  height:20px;
}

td:nth-child(15).tooltip:hover span{
  display:inline;
  position:absolute;
  border:1px solid #cccccc;
  background:white;
  color:#6c6c6c;
}

APEX:

<apex:column style="border: 1px solid #a1b4bf" styleClass="tooltip">
    <span>whatever</span>
    <apex:outputField value="{!k.Abv_Core_KAM_Total__c}" id="Total" style="background-color:transparent" >

    </apex:outputfield>  
    <apex:facet name="header">{!$ObjectType.Abv_Core_KAM_Competitor_Sales__c.Fields.Abv_Core_KAM_Total__c.Label}</apex:facet>
</apex:column>

thanks in advance !

Persijn
  • 14,624
  • 3
  • 43
  • 72
user59759
  • 159
  • 1
  • 2
  • 11

1 Answers1

0

Your mixing the css selects here.

The display: none; wil not render the element That means the tooltip:hover can never occur.

Im assuming you want to show the tooltip on the span element.

td:nth-child(15).span:hover + .tooltip {
    display:in-line;
}
td:nth-child(15) .tooltip {
   display:none;
}

See this STACK LINK for a really cool tooltip

Community
  • 1
  • 1
Persijn
  • 14,624
  • 3
  • 43
  • 72