Question

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

考虑：

<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（或普通的vanilla JS）自动将toolTip类和title属性添加到具有所需类（.existing）的所有元素并分配文本该元素的元素内容。这样您就不必复制CSS规则。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

CSS内容类而不是attr

1 个答案: