Unterschiedliche Inhalte für CSS

Question

Ich habe einen 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; 
} 

Ist es möglich, eine andere CSS zu machen, das Inhalt Attribut zu ersetzen, ohne attr() oder Dateninhalt von HTML bekommen?

Zum Beispiel:

.NameGeneralTooltip {es ist für den Inhalt GeneralTooltip zum Inhalt ersetzen: "Das ist Name"; } .CityGeneralTooltip {es ersetzt den Inhalt von GeneralTooltip durch den Inhalt: "This is City"; }

und so weiter.

Answer 1

Sie könnten nur eine andere Klasse hinzufügen, und dass der Inhalt

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