css的内容不同

Question

我有一个工具提示CSS代码：

.GeneralTooltip {
background:#c7430f;
margin:0 auto;
text-transform:uppercase;
font-family:Arial, sans-serif;
font-size:18px;
vertical-align: middle;
position:relative;
}

.GeneralTooltip::before {
content:"This is tooltip general content";
font-size:13px;
line-height:13px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
left:center;
vertical-align: middle;
transition:.0s ease-out;
background:yellow;
color:black;
border-color:black;
border:2px;
border-radius:5px;
position:absolute;
visibility:hidden;
}

.GeneralTooltip:hover::before {
visibility:visible;
position: fixed! important;
z-index: 999999999 !important;
display: block !important;
left:center;
bottom:10px;
border-color:black;
border:2px;
border-style:solid;
}

是否可以使用其他CSS替换内容属性而不使用attr（）或从HTML获取数据内容？

例如：

.NameGeneralTooltip {它用于将GeneralTooltip上的内容替换为内容：“这是名称”; } .CityGeneralTooltip {它用于将GeneralTooltip上的内容替换为内容：“这是城市”; }

等等。

Answer 1

您可以添加另一个类并使用它来设置内容

＆＃13;

＆＃13;

.GeneralTooltip {
background:#c7430f;
margin:0 auto;
text-transform:uppercase;
font-family:Arial, sans-serif;
font-size:18px;
vertical-align: middle;
position:relative;
}

.GeneralTooltip::before {
content:"This is tooltip general content";
font-size:13px;
line-height:13px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
left:center;
vertical-align: middle;
transition:.0s ease-out;
background:yellow;
color:black;
border-color:black;
border:2px;
border-radius:5px;
position:absolute;
visibility:hidden;
}

.GeneralTooltip:hover::before {
visibility:visible;
position: fixed! important;
z-index: 999999999 !important;
display: block !important;
left:center;
bottom:10px;
border-color:black;
border:2px;
border-style:solid;
}
.NameGeneralTooltip::before {
  content:"This is Name";
}
.CityGeneralTooltip::before {
  content:"This is City";
}

＆＃13;

<p class="GeneralTooltip">GeneralTooltip</p>
<p class="GeneralTooltip NameGeneralTooltip">Name</p>
<p class="GeneralTooltip CityGeneralTooltip">City</p>
<p class="GeneralTooltip">GeneralTooltip</p>

＆＃13;

＆＃13;

＆＃13;