Pen ID
Unlock Campus Themeforest adv


Hover over the emote to show a tooltip centered.
You can adjust the content and the size of the emote to see that this strategy adapts. This is better than the current strategy which causes blurryness due to using transform to perform the offsetting.

I noticed this while trying to read some emote names and was confused if it was my vision or something else. But I knew what was going on since I had used this strategy for centering content before. You can take a look at a post about it here.http://martinkool.com/post/27618832225/beware-of-half-pixels-in-css
.container {
  border: 1px solid black;
  padding: 50px 10px;
  height: 200px;
  width: 500px;

.inline {
  display: inline;

.twitch-inline {
  position: relative;
  display: inline-block;

.image.stretched {
  width: 70px;
  background-size: 70px 24px;

.image {
  height: 24px;
  width: 25px;
  background-image: url('https://static-cdn.jtvnw.net/emoticons/v1/205344/1.0');
  background-size: contain;
  background-repeat: no-repeat;

img {
  vertical-align: middle;

.tooltip-position {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin: auto auto 5px auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

.tooltip {
  border-radius: 2px;
  background: black;
  display: none;
  padding: 5px 10px;
  color: white;

.tooltip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
  top: 99%;
  margin: auto;

.twitch-inline:hover .tooltip {
  display: inline-block;
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv