0

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: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>

前もって感謝します ！

4

1 に答える 1

0

css を混合すると、ここで選択されます。

はdisplay: none;要素をレンダリングしません。つまり、tooltip:hoverは決して発生しません。

span 要素にツールチップを表示したいとします。

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

本当にクールなツールチップについては、このSTACK LINKを参照してください

于 2015-01-16T14:25:34.980 に答える