Back

Building Dynamic Avatars with Interactive Tooltips

Learn how to create visually appealing avatars with hover effects and informative tooltips using CSS and HTML.

HTML

In this guide, we will create a dynamic avatar component with engaging tooltips. The structure involves a container that holds individual avatar elements, each of which includes an image and a tooltip box.
Here is the HTML snippet to start with:

<div class="avatar-container">
  <div class="avatar">
    <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="avatar-image">
    <div class="tooltip">
      <span>Name: John Doe</span><br>
      <span>Email: johndoe@example.com</span>
    </div>
  </div>
...
</div>

CSS

The CSS section focuses on styling the avatars and tooltips. We use Flexbox to arrange avatars horizontally within the container, ensuring space and alignment are evenly distributed. Each avatar is circular and includes a smooth hover effect using transitions. The .avatar-container class: This sets the overall layout of the container using flex properties to help distribute the avatars evenly, aligning them to the center.

.avatar-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
}

The .avatar class: Establishes a relative position to hold the tooltip, includes a shadow, and applies scaling on hover for visual feedback.

.avatar {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Next, the .tooltip class defines how the tooltip behaves and appears visually. Initially hidden, its visibility and opacity change on hover to become exposed. The tooltip is well-positioned under the avatar image.

.tooltip {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}
.avatar:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

JavaScript

No JavaScript is needed for this component, keeping our implementation lightweight. All interactivity is achieved purely with CSS transitions and hover states.

Using Dynamic Avatars

This component allows users to add avatars dynamically by simply adding new .avatar elements within the .avatar-container. Tooltips must contain specific user information such as names and emails to give users relevant information at a glance. And that's it. Your web page now has interactive avatars that provide additional user details elegantly and without overly complex coding requirements.

Whole code

<div class="avatar-container">
  <div class="avatar">
    <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="avatar-image">
    <div class="tooltip">
      <span>Name: John Doe</span><br>
      <span>Email: johndoe@example.com</span>
    </div>
  </div>
  <div class="avatar">
    <img src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar" class="avatar-image">
    <div class="tooltip">
      <span>Name: Jane Smith</span><br>
      <span>Email: janesmith@example.com</span>
    </div>
  </div>
</div>


<style>
.avatar-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
}
.avatar {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.avatar-image {
  width: 100px;
  height: 100px;
  display: block;
}
.tooltip {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}
.avatar:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
</style>

Thank you for reading this article.

Building Dynamic Avatars with Interactive Tooltips

HTML

CSS

JavaScript

Using Dynamic Avatars

Whole code

Comments

More avatars

Similar

See also