JSFiddle - React, Tailwind, and code Playground

HTML

Hover the icon
<br />
<i class=" icon icon-blue icon-star-on "></i>
<i class=" icon icon-blue icon-star-on "></i>
<i class=" icon icon-blue icon-star-on "></i>

CSS

.active .icon32.icon-star-on, .icon32.icon-star-on, .icon32.icon-star-on:hover {
    background-position : -448px -96px;
}
.icon.icon-blue, .icons-blue .icon {
    background-color: blue;
    width: 16px;
    height: 16px;
    display: block;
}
.icon:hover:after {
    content: "Your tooltip";
    display: block;
    position: relative;
    top: -16px;
    right: -16px;
    width: 100px;
    background: lightblue;
}