How to Build a Responsive Profile Tooltip Using TailwindCSS
Tags: webdev, tailwindcss, html, webcomponents
Published: 2023-03-18 21:35:00


![Profile Tooltip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cilixk4tydbly9hpdpg9.png)


A tooltip is a graphical user interface (GUI) element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it.

Being one of the most popular on-screen elements of onboarding and user engagement, websites and apps can feature simple tooltips, series of tooltips, single tooltips, or tooltips as interactive elements of a user journey.

Tooltips have a wide range of use cases, and they can be adjusted to each use case depending on their purpose.

For this tutorial section, we will be building a Profile tooltip, such that on hover, it gives you more details on the profile image being hovered.

This kind of Tooltip is can be seen on Twitter, where when a user hovers over another user's profile picture, a tooltip is shown giving more details about the user whose profile image is being hovered.


![Demo of Profile Tooltip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sar5aqytujjs4f7rfjtz.gif)



## Understanding the task

A tooltip isn't a complex task to do, we will be doing this work into 2 separate parts. The User Profile, and the Profile Tooltip.


![Different Parts of Profile tooltip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuapf3v37y8j6yk96the.png)



## Structure of Code

Our code structure is basic, and straightforward.

```xml
<body>
    <div>
            <!-- Profile Tooltip -->
                <div></div>

            <!-- User Profile Picture-->
                <div></div>

    </div>
</body>
```

We basically have the User profile picture, from which the tooltip will show and we have the tooltip code itself.

### User Profile Picture

```xml
            <!-- Profile Tooltip -->
<div id="profile" class="cursor-pointer active:scale-95">
   <div class="h-16 w-16 rounded-full overflow-hidden p-1.5 bg-slate-900">
     <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4JL5abHt--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1035172/ddd0c7d5-5a6b-4191-b822-02745bea888d.png" alt="" class="rounded-full aspect-square object-center object-cover">
    </div>
</div>
```

We have a container with **id="profile"**, which `scale-95` when active.

We gave the image container a `width` and `height` of `w-16` and `h-16` respectively, a `border-radius` of `rounded-full`. To make the image responsive, we gave it an `aspect-square object-center` and `object-cover`.

That's all for this part.


![User Profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiuimhy1xi7qjn85tzcd.png)

### Profile Tooltip

```xml
            <!-- User Profile Picture-->
<div id="tooltip" class="hidden absolute -top-[11.5rem] bg-[#1d1a36] rounded-lg">
  <div class="max-w-[20rem] flex gap-2 px-2 py-7 text-sm relative before:absolute before:content-[''] before:w-5 before:h-5 before:rotate-45 before:bg-[#1d1a36] before:-bottom-2.5 before:left-[45%]">
    <div class="h-14 w-14 rounded-full overflow-hidden">
       <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4JL5abHt--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1035172/ddd0c7d5-5a6b-4191-b822-02745bea888d.png" alt="" class="aspect-square object-center object-cover">
    </div>

    <div>
      <div class="mb-5">
        <h2 class="font-semibold text-[14px]">Mbianou Bradon</h2>
        <p class="mt-1">UX Designer <span class="text-[#6952f9]">@iknite</span></p>
       </div>

       <div id="out" class="cursor-pointer text-center w-fit px-3 py-3 bg-[#6952f9] text-xs font-semibold border border-[#6952f9] hover:bg-white hover:text-[#6952f9] active:scale-95 rounded-md"><h2>Message</h2></div>
    </div>

  </div>
</div>
```

The main container has an id="tooltip", for easy referencing at the level of the javascript file.

The container is positioned absolute and place where it is supposed to be using `-top-[11.5rem]`

The content of this container is principally the profile image, the User's name and details like what he does.

Styles applied here are basic styling such as `padding-inline` of `px`, `padding-block` of `py`, `border-radius` of `rounded-full` and `font-weigh`t of `font-semibold`


![Tooltip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu3e0ytu8l10dn0e0n9a.png)

### Extra Styling

We also gave some extra styling to the main container holding everything together, and to the body of the page

```xml
<body class="bg-gradient-to-r from-[#8875d5] to-[#423b87] flex items-center justify-center min-h-screen">
    <div class="w-full max-w-lg relative mt-10 flex justify-center">
            <!-- Profile Tooltip -->
                <div></div>

            <!-- User Profile Picture-->
                <div></div>

    </div>
</body>
```

And this should be all for the HTML and TailwindCSS section.

Now let's jump into our JavaScript file.

## JavaScript

```javascript
const tooltip = document.getElementById('tooltip')
const profile = document.getElementById('profile')

profile.addEventListener('mouseover', () => {
    tooltip.classList.toggle('hidden')
})

profile.addEventListener('mouseout', () => {
    tooltip.classList.toggle('hidden')
    
})
```

Yeah! That's all about the JavScript code. On mouveover, the TailwindCSS property **"hidden"** is toggle, to display the tooltip, and on mouseout, it is toggle back to hide the tooltip.

On this note, we conclude this section.


![End Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ne9ca3zz3wwmmoi5s6wg.png)



## **Conclusion**

We just built a Beautiful and simple tooltip Component

Many employers will need such components to be added to their websites, and for sure you know how simple it is to create it straight from your HTML document.

You can have a Live preview on [Codepen](https://codepen.io/mbianou-bradon/pen/bGjYJmE) or find the code on [GitHub](https://github.com/mbianou-bradon/icodethis-daily-ui-challenge/tree/main/public/January%202023/Profile-Tooltip)

Don’t hesitate to share with me if you were able to complete the tutorial on your end.

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋