我们可以使用 CSS 在工具提示中显示与悬停的文本相同的文本吗

Question

我想知道我是否可以用 CSS 做到这一点：

我需要在一个报表页面中单行显示一个数据，但是如果数据太长，我会做一个省略号并隐藏其余部分。即我需要显示“72348942372394872349834273428973248923”，但它太长了。所以我显示“7234894237239487234 ...”。这很容易用 CSS 完成。我现在需要做的是在工具提示中悬停“7234894237239487234...”时显示完整数据。

我目前使用 title 属性来这样做，但我想知道是否有办法只使用 CSS 来获得类似的结果。

我正在使用 primefaces 5.3

<p:panelGrid styleClass="ui-noborder my-view">
    <p:row>
        <p:column>
            <h:outputText value="label for data : " />
        </p:column>
        <p:column>
            <h:outputText styleClass="shrinkable"
                          title="72348942372394872349834273428973248923"
                          value="72348942372394872349834273428973248923" />
        </p:column>
        <p:column>
            <h:outputText value="label for other data : " />
        </p:column>
        <p:column>
            <h:outputText value="other data" />
        </p:column>
    </p:row>
</p:panelGrid>

用我现在的 CSS class

.shrinkable {
    display: block;
    padding-right: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
}

它有效...但我希望有更简单的方法来实现它（比如只需在标签上使用 .shrinkable class 并且工具提示将显示标签的内容）

编辑：结果 HTML 看起来像这样：

.shrinkable {
  display: block;
  padding-right: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
}

//just aweful hard coded patch to
//simulate the effect with primefaces
table {
  max-width: 600px;
}

td {
  max-width: 150px;
  min-width: 150px;
}

<table id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f2f4" 
class="ui-panelgrid ui-widget ui-noborder my-view" 
role="grid">
  <tbody>
    <tr id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f2d6" 
    class="ui-widget-content ui-panelgrid-even" 
    role="row">
      <td id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f340" 
      role="gridcell" 
      class="ui-panelgrid-cell">
        <span id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f322">
          label for data : 
        </span>
      </td>
      <td id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f315" 
      role="gridcell" 
      class="ui-panelgrid-cell">
        <span id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f37f" 
        title="72348942372394872349834273428973248923" 
        class="shrinkable">
          72348942372394872349834273428973248923
        </span>
      </td>
      <td id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f36e" 
      role="gridcell" 
      class="ui-panelgrid-cell">
        <span id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f358">
          label for other data : 
        </span>
      </td>
      <td id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f34b" 
      role="gridcell" 
      class="ui-panelgrid-cell">
        <span id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f3ad">
          other data
        </span>
      </td>
    </tr>
  </tbody>
</table>

这是当光标悬停在我页面上的值上时的结果页面和效果：

Answer 1

尝试使用

.component-class::after {
  content: attr(value);
  display: none;
  // style your component;
}

比添加

.component-class:hover::after {
  display: block; // inline-block etc.
}

Answer 2

我终于找到了一个解决方案：我做了一个 JavaScript 函数来为所有使用 CSS class 的标签设置值：就像一个魅力。我现在只需要在我希望使用它的页面上导入这个文件并且它可以工作（请注意，当前代码只是为了支持 h:outputText。我可能会为其他一些标签工作，但你可能会需要修改代码以使其根据您的需要工作）。

以下代码在JSF页面

<p:panelGrid styleClass="ui-noborder my-view">
    <p:row>
        <p:column>
            <h:outputText value="label for data : " />
        </p:column>
        <p:column>
            <h:outputText styleClass="shrinkable"  value="72348942372394872349834273428973248923" />
        </p:column>
        <p:column>
            <h:outputText value="label for other data : " />
        </p:column>
        <p:column>
            <h:outputText value="other data" />
        </p:column>
    </p:row>
</p:panelGrid>

并在生成的页面上变成这样（代码段包括 CSS 和 JavaScript）

$(document).ready(function(){
 updateShrinking();
});

function updateShrinking() {
    var elements = $(".shrinkable");
    for (var i = 0; i < elements.length; i++) {
        var value = elements[i].innerText;
        elements[i].setAttribute("title", value);
    }
}

.shrinkable {
  display: block;
  padding-right: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
}

//just aweful hard coded patch to
//simulate the effect with primefaces
table {
  max-width: 600px;
}

td {
  max-width: 150px;
  min-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f2f4" class="ui-panelgrid ui-widget ui-noborder my-view" role="grid">
  <tbody>
    <tr id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f2d6" class="ui-widget-content ui-panelgrid-even" role="row">
      <td id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f340" role="gridcell" class="ui-panelgrid-cell">
        <span id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f322">
          label for data : 
        </span>
      </td>
      <td id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f315" role="gridcell" class="ui-panelgrid-cell">
        <span id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f37f" class="shrinkable">
          72348942372394872349834273428973248923
        </span>
      </td>
      <td id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f36e" role="gridcell" class="ui-panelgrid-cell">
        <span id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f358">
          label for other data : 
        </span>
      </td>
      <td id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f34b" role="gridcell" class="ui-panelgrid-cell">
        <span id="viewns_Z7_31H029C0MGHE00APLGNDSL20K4_:form:ns_Z7_31H029C0MGHE00APLGNDSL20K4_j_id1385333793_6961f3ad">
            other data
          </span>
      </td>
    </tr>
  </tbody>
</table>

updateShrinking() 函数允许我手动更新页面的收缩，以防我使用 Ajax 调用 PrimeFaces

我们可以使用 CSS 在工具提示中显示与悬停的文本相同的文本吗

Can we use CSS to display the same text in a tooltip than what is hovered

css

xhtml

tooltip