Reaction emoji bubble slips under the post below

emoji

#1

Small post about an issue i just found regarding the newly added reaction emojis.

It is possible to know who used an emoji by hovering it. This makes a bubble appear.
But, if this bubble is too big, it slips under the post below.


#2

It’s a fairly minor cosmetic issue so I’ll look into it when I want something different to do. :slight_smile:


#3

This CSS corrects the problem:

.topic-body, .topic-avatar {
	position: static !important;
}

#4

It corrects this issue but creates some others (e.g. with the post management tools). :slightly_frowning_face:


#5

Apparently, some post-management tools (which I can’t see as an ordinary user) are positioned relative to the .topic-body.

Here’s another attempt:

.topic-body {
	overflow: visible !important;
}
.topic-avatar {
	position: static !important;
}
.post-menu-area {
	clear: both !important;
}

Any better?


#6

Hmm… I’m not seeing this any more without any changes. Can you (/anyone) verify you can still see this?


#7

I’m still seeing the problem, for example, when displaying the tooltip for the reaction icon in your previous post.


#8

OK, so the specific tooltip selector/rule is this one:

.post-retort__tooltip {
	opacity: 0;
	transition: .5s opacity;
	position: absolute;
	top: 30px;
	font-size: 12px;
	text-align: center;
	width: 140px;
	background: black;
	color: white;
	font-weight: bold;
	padding: 5px;
	border-radius: 5px;
	word-wrap: normal;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 1;
	pointer-events: none;
}

I imagine simply lowering the z-index will allow it to reliably appear on top. What’s that like?


#9

Adjusting the z-index of .post-retort__tooltip or of .topic-body has no effect. I think it’s because each .topic-body is below the subsequent .topic-body (same z-index, so HTML node order determines z-level). The .post-retort__tooltip is a child of a .topic-body, so it can’t appear above the subsequent .topic-body.

My second CSS attempt above works around this problem by repositioning some elements.


#10

OK here we go:

.post-retort__tooltip {
	width: 185px;
	padding: 3px;
	left: 10%;
	transform: unset;
}

.post-retort__tooltip::after {
	top: 0px;
	left: 5%;
}

That re-styles the tooltip so it’s a bit wider and to one side. It’s a bit better.


#11

Yes, it’s a bit better, but the tooltip is still cropped a bit at the bottom.


#12

Not if the user name is short :wink:


#13

And there can’t be multiple names attached to the same icon. :wink:


#14

Aaaaannnddd… with some slightly tighter padding it all fits neatly. It’s not quite as nicely spaced but it will do, and it doesn’t affect the rest of the layout.