CSS 内容类而不是 attr

Question

我想将现有标记传递给使用 css 构建的工具提示，目前使用 attr(title) 但必须复制标记以获得所需的结果。

考虑：

<p class="toolTip" title="this is a tooltip">hover over me</p>
<p class="existing">this is a tool tip</p>


.toolTip:hover:after{
    content: attr(title);
}

我想做的是这样的：

.toolTip:hover:after{
    content: class(existing);  //invalid I know!
}

tl：博士；我想使用类从现有标记中提取内容，而不是使用 title 属性。

Answer 1

使用纯 CSS（甚至使用预处理器）没有真正的方法可以选择元素的整个文本内容并将其分配给 content 属性。 content 属性只能有预定义的字符串、URL、属性值或计数器作为值。

您可以使用 jQuery（或普通 JS）自动将 toolTip 类和 title 属性添加到具有所需类 (.existing) 的所有元素，并将元素的文本内容分配给该类属性。这样您就不必复制 CSS 规则。

注意：这只是一个关于如何将元素的内容设置为其标题属性的简单示例，但在现实世界的场景中，您需要更多，因为将实际内容本身设置为工具提示没有多大意义。

$(document).ready(function() {
  $('.existing').addClass('toolTip');
  $('.existing').each(function() {
    $(this).attr('title', $(this).text());
  });
});

.toolTip:hover:after {
  content: attr(title);
  /* just for demo */
  position: relative;
  left: 10px;
  border: 1px solid green;
  background: lightgreen;
  padding: 2px;
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="toolTip" title="this is a tooltip">hover over me</p>
<p class="existing">this is a tool tip</p>

---

不同的示例： 这是一个略有不同的示例，其中工具提示与元素的内容不同。这里元素的内容是父元素的内容，工具提示文本最初存在于子元素中（class="existing"）。使用 jQuery 将这个子 span 的内容添加到父的 title 属性中。

$(document).ready(function() {
  $('.existing').parent().addClass('toolTip');
  $('.existing').each(function() {
    $(this).parent().attr('title', $(this).text());
  });
});

.toolTip:hover:after {
  content: attr(title);
  /* just for demo */
  position: relative;
  left: 10px;
  border: 1px solid green;
  background: lightgreen;
  padding: 2px;
  border-radius: 2px;
}
.existing {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="toolTip" title="this is a tooltip">hover over me</p>
<p>hover over me <span class="existing">this is a tool tip</span>
</p>

<div>I have a tooltip too<span class="existing">See, I told you!</span>
</div>