Kevin Powell - Community•3mo ago

my popup is being hidden

const Server = () => {
  return (
    <div className="relative mb-2 h-[48px] w-[48px]">
      <div className="avatar">
        <div className="rounded-md object-contain">
          <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
        </div>
      </div>
/* the popup*/
      <div className="absolute left-1/2 z-50 bg-black">Server Name</div>
    </div>
  );
};

const Server = () => {
  return (
    <div className="relative mb-2 h-[48px] w-[48px]">
      <div className="avatar">
        <div className="rounded-md object-contain">
          <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
        </div>
      </div>
/* the popup*/
      <div className="absolute left-1/2 z-50 bg-black">Server Name</div>
    </div>
  );
};

import Server from "./Server";

const Servers = () => {
  return (
    <div className="flex-1 overflow-y-scroll scrollbar-none">
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
    </div>
  );
};

export default Servers;

import Server from "./Server";

const Servers = () => {
  return (
    <div className="flex-1 overflow-y-scroll scrollbar-none">
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
      <Server />
    </div>
  );
};

export default Servers;

23 Replies

thereturning•3mo ago

i tried z index but that didnt seem to work

import Servers from "./Servers";
import { IoChatbox } from "react-icons/io5";
import { IoIosAddCircleOutline } from "react-icons/io";

const Serverbar = () => {
  return (
    <div className="flex h-screen w-[72px] shrink-0 flex-col items-center bg-red-400 py-2">
      <Servers />
    </div>
  );
};

export default Serverbar;

import Servers from "./Servers";
import { IoChatbox } from "react-icons/io5";
import { IoIosAddCircleOutline } from "react-icons/io";

const Serverbar = () => {
  return (
    <div className="flex h-screen w-[72px] shrink-0 flex-col items-center bg-red-400 py-2">
      <Servers />
    </div>
  );
};

export default Serverbar;

thereturning•3mo ago

its serverbar that hiding it, this is just <Serverbar/> idk how to fix it though

clevermissfox•3mo ago

What triggers the popup ?

thereturning•3mo ago

a hover i turned it off rn

clevermissfox•3mo ago

So it's more of a tool tip?

thereturning•3mo ago

i guess

clevermissfox•3mo ago

Why not use s pseudo element?

thereturning•3mo ago

whats that

Mannix•3mo ago

maybe it's overflow-y-scroll??

thereturning•3mo ago

oh that makes it show how do i handle overflow then

Mannix•3mo ago

will that ever be an issue?

thereturning•3mo ago

its supposed to be a scroll thing like discord server list

Mannix•3mo ago

so maybe use auto not scroll. when you set overflow in one axis the other axis is set to hidden automatically iirc

thereturning•3mo ago

it still the same am i doing the tooltip wrong

Mannix•3mo ago

you probably need to move it out of this container then just like discord does

thereturning•3mo ago

oh how do i chekc if the server button is hovered if its out of the container ill figure it out thx guys

Mannix•3mo ago

discord has an element that is outside of the navigation that is getting updated (position text etc) when you hover over one otherwise it's empty

Chris Bolson•3mo ago

I know you have figured this out but I was already looking the code so here is how I might do this using Tailwind:

<div class="group relative size-16">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" class="size-full object-fit rounded-md" />
    <div class="absolute left-full top-2/4 -translate-y-2/4 text-nowrap bg-black text-white text-sm py-1 px-2 rounded-md transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:translate-x-2 before:absolute before:size-2 before:bg-black before:top-2/4 before:-left-1 before:-translate-y-2/4 before:rotate-45 before:rounded-sm">Server Name</div> 
</div>

<div class="group relative size-16">
    <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" class="size-full object-fit rounded-md" />
    <div class="absolute left-full top-2/4 -translate-y-2/4 text-nowrap bg-black text-white text-sm py-1 px-2 rounded-md transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:translate-x-2 before:absolute before:size-2 before:bg-black before:top-2/4 before:-left-1 before:-translate-y-2/4 before:rotate-45 before:rounded-sm">Server Name</div> 
</div>

A quick demo (with a few alterations and additions) https://codepen.io/cbolson/pen/mdZpXzp I now realize that your issue is less about the tooltip and more about the vertical scroll. I will take another look...

Chris Bolson•3mo ago

I suspect that you have resolved this but I have continued to look at it anyway 😅 As Mannix has mentioned, you probably need to take the "tooltip" out of its container and place it on the DOM directly so as to avoid the clipping. I have made a further test which uses JS to try this out https://codepen.io/cbolson/pen/LYKedaJ Note - It could still do with some more JS, such as hiding the tooltip on scroll and possibly also repositioning it so that it is always positioned on the vertical center of the "avatar" when initiating the display animation. Update - I have refactored the JS so that it generates the tooltip on hover (and then destroys it on mouseout) rather than on load. This ensures that its starting position is always relative to the button, thus avoiding strange transitions when having scrolled the parent container.

Chris Bolson

CodePen

[Demo] - Discord style avatar tooltips

This version uses JS to position the tooltips to allow them to overflow the sidebar overflow limitation required to have vertical scroll....

MarkBoots•3mo ago

i think with anchor positioning it would be possible? as the elements don't have to be in the same container? But even if so, it's not supported enough yet for production

Chris Bolson•3mo ago

I need to take a closer look at anchor 🤔. I will admit that I tend to not play around too much with these newer properties until they get acceptable browser support.

Kevin Powell•3mo ago

anchor is 🤯 It solves so many problems so easily. The polyfill for it is also good enough that GitHub is using it on their site currently I should do a video on it, and give a shoutout to oddbird (Miriam Suzane's company) who made the polyfill

thereturning•3mo ago

wow sorry i havent replied i wen tto sleep yea i didnt solve it yet so thank u guys

Gaming

Programming

my popup is being hidden