Different content for css

Question

I have a tooltip CSS code:

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

Is it possible to make some other CSS to replace the content attribute without using attr() or get data content from HTML?

For example:

.NameGeneralTooltip { it for replace content on GeneralTooltip to content:"This is Name"; } .CityGeneralTooltip { it for replace content on GeneralTooltip to content:"This is City"; }

and so on.

Answer 1

You could just add another class and use that to set the content

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

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