DEV Community

Mbianou Bradon
Mbianou Bradon

Posted on • Originally published at mbianoubradon.hashnode.dev

How to Build a Responsive Profile Tooltip Using TailwindCSS

Profile Tooltip

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

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

Structure of Code

Our code structure is basic, and straightforward.

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

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

    </div>
</body>
Enter fullscreen mode Exit fullscreen mode

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

User Profile Picture

            <!-- 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>
Enter fullscreen mode Exit fullscreen mode

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

Profile Tooltip

            <!-- 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>
Enter fullscreen mode Exit fullscreen mode

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-weight of font-semibold

Tooltip

Extra Styling

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

<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>
Enter fullscreen mode Exit fullscreen mode

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

Now let's jump into our JavaScript file.

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')

})
Enter fullscreen mode Exit fullscreen mode

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

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 or find the code on GitHub

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! 👋

Top comments (2)

Collapse
 
seayava profile image
SeayAva

I really like the information you give, they are very helpful to me . Lords Exchange id

Collapse
 
mbianoubradon profile image
Mbianou Bradon

Thank you! I am happy I was able to help.
I am glad you found my content informative