apex：使用工具提示显示悬停显示值的输出字段

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 :

我有一个带有css overflow:hidden的数据表。现在对于大数字数字,我想要一个特定的列,这里的第15个,使用工具提示启用悬停显示值。悬停部分工作正常并显示值,但输出字段本身未显示任何值。这是使用的样式:

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 !

提前致谢 !

1 个解决方案

#1

Your mixing the css selects here.

你混合css选择这里。

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.

我假设你想在span元素上显示工具提示。

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

请参阅此STACK LINK以获得非常酷的工具提示

#1