LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Hover over the emote to show a tooltip centered.
chocoRengar
ReallyLongEmoteName
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.
s

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
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;
}
Term
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv