Reaction emoji bubble slips under the post below



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.


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


This CSS corrects the problem:

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


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


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?


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


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


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?


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.


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.


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


Not if the user name is short :wink:


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


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.