JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="container">
<span class="knife" title="knife">★</span> <span class="name">Falchion Knife | Boreal Forest</span> (<span class="exterior">Factory New</span>)
<br>
<br>
<span class="souvenir">Souvenir</span> <span class="name">FAMAS | Teardown</span> (<span class="exterior">Battle-Scarred</span>)
<br>
<br>
<span class="knife">★</span> <span class="stattrak">StatTrak™</span> <span class="name">Flip Knife | Lore</span> (<span class="exterior">Field-Tested</span>)
<br>
<br>
<span class="knife">★</span> <span class="name">Bayonet | Autotronic</span> (<span class="exterior">Battle-Scarred</span>)
<br>
<br>
<span class="name">AK-47 | Redline</span> (<span class="exterior">Field-Tested</span>)
<br>
<br>
<span class="knife">★</span> <span class="name">Karambit | Bright Water</span> (<span class="exterior">Battle-Scarred</span>)
<br>
<br>
<span class="stattrak">StatTrak™</span> <span class="name">Negev | Man-o'-war</span> (<span class="exterior">Minimal Wear</span>)
<br>
<br>
<span class="knife">★</span> <span class="name">M9 Bayonet | Marble Fade</span> (<span class="exterior">Minimal Wear</span>)
<br>
<br>
<span class="knife">★</span> <span class="stattrak">StatTrak™</span> <span class="name">Flip Knife | Gamma Doppler</span> (<span class="exterior">Minimal Wear</span>)
<br>
<br>
<span class="name">Tec-9 | Nuclear Threat</span> (<span class="exterior">Factory New</span>)
<br>
<br>
<span class="souvenir">Souvenir</span> <span class="name">Tec-9 | Nuclear Threat</span> (<span class="exterior">Minimal Wear</span>)
<br>
<br>
<span class="knife">★</span> <span class="stattrak">StatTrak™</span> <span class="name">Karambit</span>
<br>
<br>
<span class="knife">★</span> <span...
CSS
.container {
background: #ececec;
display: block;
position: absolute;
padding: 10px;
}
.knife,
.name,
.exterior,
.souvenir,
.stattrak {
cursor: pointer;
}
.name {
color: red;
}
.stattrak {
color: #cf8532;
}
.souvenir {
color: #FFD700;
}
.exterior {
color: grey;
}
.knife {
color: #8650AC;
}
JavaScript
var weapons = [
'★ Falchion Knife | Boreal Forest (Factory New)',
'Souvenir FAMAS | Teardown (Battle-Scarred)',
'★ StatTrak™ Flip Knife | Lore (Field-Tested)',
'★ Bayonet | Autotronic (Battle-Scarred)',
'AK-47 | Redline (Field-Tested)',
'★ Karambit | Bright Water (Battle-Scarred)',
'StatTrak™ Negev | Man-o\'-war (Minimal Wear)',
'★ M9 Bayonet | Marble Fade (Minimal Wear)',
'★ StatTrak™ Flip Knife | Gamma Doppler (Minimal Wear)',
'Tec-9 | Nuclear Threat (Factory New)',
'Souvenir Tec-9 | Nuclear Threat (Minimal Wear)',
'★ StatTrak™ Karambit',
'★ StatTrak™ Gut Knife',
'★ Huntsman Knife'
];
$(document).ready(function() {
$(document).tooltip({
show: {
effect: "slideDown",
delay: 250
},
items: ".knife, .name, .exterior, .souvenir, .stattrak",
content: function() {
switch ($(this).attr('class')) {
case 'knife':
return 'означает, что это нож';
case 'name':
return 'имя';
case 'exterior':
return 'качество';
case 'souvenir':
return 'сувенирный';
case 'stattrak':
return 'имеет счетчик выстрелов';
}
}
});
});