How to Display a Slack-Style Emoji List UI on Hover with Tailwind CSS

In this quick guide, we'll walk you through how to create a Slack-style emoji list that appears when hovering over a parent element. We'll use Tailwind CSS for styling to achieve a clean and responsive UI.

Objective

To display a list of emojis when hovering over a parent div, creating an interactive Slack-like experience for users.

Initial Setup

Let's start with the basic structure. Below, we have a parent div containing an emoji list. We'll use Tailwind to style this and add the hover effect.

<div className="relative">
  {/* Emoji List */}
  <div className="-top-5 right-0 rounded-md border">
    {emojis.map((emoji: EmojiI) => (
      <span key={emoji.title}>{emoji.value}</span>
    ))}
  </div>
</div>

In this initial state, the emoji list is always visible. Let's modify this to make the emoji list appear only when hovering over the parent element.

Process

Step0: Update tailwind.config.ts

  variants: {
    extend: {
      display: ["group-hover"],
    },
  },

Step 1: Add a Class to the Parent Div

First, we need to add a class to the parent div to indicate that it will be used for the hover interaction. We'll use Tailwind's group utility to facilitate hover styles that affect child elements.

Here's how the updated code looks:

<div className="relative group"> {/* Added the `group` class */}
  {/* Emoji List */}
  <div className="-top-5 right-0 rounded-md border">
    {emojis.map((emoji: EmojiI) => (
      <span key={emoji.title}>{emoji.value}</span>
    ))}
  </div>
</div>

Adding the group class to the parent element will allow us to use group-hover in the child component

Step 2: Add the Hover Effect to the Emoji List

Now we need to make the emoji list appear only when the parent element is hovered over. We'll achieve this by combining Tailwind's group-hover and hidden classes.

Here's the final version of the code:

<div className="relative group">
  {/* Emoji List */}
  <div className="-top-5 right-0 rounded-md border absolute hidden group-hover:flex">
    {emojis.map((emoji: EmojiI) => (
      <span key={emoji.title}>{emoji.value}</span>
    ))}
  </div>
</div>

Explanation:

• relative (Parent Div): The parent div is given a relative class, which will allow the child element to be positioned absolutely relative to it.
• absolute hidden group-hover:flex (Emoji List Div): The emoji list is initially hidden (hidden class). When the parent element is hovered over (group-hover), the emoji list is displayed as a flex container (flex).

This setup ensures that the emoji list is hidden by default and only appears when the user hovers over the parent div. This approach provides a neat Slack-like hover effect for showing additional options.

Final Thoughts

Using Tailwind CSS's utility-first approach, adding a hover effect to display an emoji list is both simple and effective. By combining group, hidden, and group-hover utilities, we can create interactive UI elements with minimal code.

Feel free to adjust the styling or the positioning of the emoji list to better fit your application's design.

Happy coding!