<div class="tooltip-container">
  <div class="tooltip">
    <div class="profile">
      <div class="user">
        <div class="img">Ui</div>
        <div class="details">
          <div class="name">User</div>
          <div class="username">@username</div>
        </div>
      </div>
      <div class="about">500+ Connections</div>
    </div>
  </div>
  <div class="text">
    <a class="icon" href="https://freecodez.com/">
      <div class="layer">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fab fa-linkedin">
          <svg viewBox="0 0 448 512" height="1em">
            <path
              d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
            ></path>
          </svg>
        </span>
      </div>
      <div class="text">LinkedIn</div>
    </a>
  </div>
</div>

.tooltip-container {
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  border-radius: 10px;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 15px;
  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(255, 255, 255, 0.1),
    5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
}

.profile {
  background: #2a2b2f;
  border-radius: 10px 15px;
  padding: 10px;
  border: 1px solid rgba(11, 63, 95, 1);
}

.tooltip-container:hover .tooltip {
  top: -150px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.icon {
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}
.layer {
  width: 55px;
  height: 55px;
  transition: transform 0.3s;
}
.icon:hover .layer {
  transform: rotate(-35deg) skew(20deg);
}
.layer span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: all 0.3s;
}

.layer span,
.text {
  color: #1da1f2;
  border-color: #1da1f2;
}

.icon:hover.layer span {
  box-shadow: -1px 1px 3px #1da1f2;
}
.icon .text {
  position: absolute;
  left: 50%;
  bottom: -5px;
  opacity: 0;
  font-weight: 500;
  transform: translateX(-50%);
  transition: bottom 0.3s ease, opacity 0.3s ease;
}
.icon:hover .text {
  bottom: -35px;
  opacity: 1;
}

.icon:hover .layer span:nth-child(1) {
  opacity: 0.2;
}
.icon:hover .layer span:nth-child(2) {
  opacity: 0.4;
  transform: translate(5px, -5px);
}
.icon:hover .layer span:nth-child(3) {
  opacity: 0.6;
  transform: translate(10px, -10px);
}
.icon:hover .layer span:nth-child(4) {
  opacity: 0.8;
  transform: translate(15px, -15px);
}
.icon:hover .layer span:nth-child(5) {
  opacity: 1;
  transform: translate(20px, -20px);
}

.layer span.fab {
  font-size: 30px;
  line-height: 64px;
  text-align: center;
  fill: #1da1f2;
  background: #000;
}
.user {
  display: flex;
  gap: 10px;
}
.img {
  width: 50px;
  height: 50px;
  font-size: 25px;
  font-weight: 700;
  border: 1px solid #1da1f2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.name {
  font-size: 17px;
  font-weight: 700;
  color: #1da1f2;
}
.details {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: #fff;
}
.about {
  color: #ccc;
  padding-top: 5px;
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Interactive Tooltip Profile Card with LinkedIn Icon Using HTML and CSS

Adding an interactive tooltip to your website is a great way to enhance the user experience without cluttering your layout. This tooltip design creates a floating profile card that appears on hover, combined with a stylish LinkedIn icon that animates in a unique layered style. Built entirely with HTML and CSS, this effect is lightweight, fast, and visually impressive.

How the Tooltip Profile Card Works

At the center of this layout is a tooltip container that acts as the main trigger. When a user hovers over it, a profile card fades into view just above it. This tooltip includes a user image, a display name, a username, and a short description such as “500+ Connections.” It’s the kind of element that could work well on networking platforms, user directories, or team pages.

What makes this design stand out is how smoothly the tooltip appears. It transitions from being hidden to fully visible using soft opacity and position animations. The card also includes a subtle background glow and a layered border effect, giving it a modern, polished look.

Profile Section Breakdown

The profile card is neatly divided:

A user avatar area represented by initials.
Basic user details, including the name and a username in a smaller size.
A quick description or status line beneath the profile information.

Each part is designed to maintain a clean visual hierarchy, helping users quickly understand who they’re viewing.

Animated LinkedIn Icon with Hover Effect

Below the tooltip is a LinkedIn icon link, styled with a layered animation. This element has five overlapping span layers, each reacting differently when hovered. As the user moves their mouse over the icon, the layers shift in perspective, rotate slightly, and move in staggered directions to create a 3D, floating effect.

The LinkedIn logo inside the icon is styled with a professional blue tone, matching LinkedIn’s brand identity. The animation brings attention to the icon and makes it more engaging to click.

There’s also a text label under the icon that appears only when hovered, letting the user know they’re about to visit a LinkedIn profile. It adds clarity without being visible all the time.

Interactive Hover Effects

The tooltip design relies entirely on CSS transitions. When hovering:

The tooltip smoothly moves upward and becomes fully visible.
The icon layers shift in a dynamic way.
Text under the icon fades in while sliding down.

These small but effective animations work together to make the entire component feel interactive and responsive.

Where You Can Use This Design

This type of tooltip profile card works well in:

Team or staff profile sections
Social media linking areas
Networking platforms
User preview cards on hover
Author sections in blog posts

You can also customize the design with your own branding, images, or social icons to match your needs.

Final Thoughts

This tooltip card design brings together a smooth hover profile interaction and a stylish LinkedIn icon, all without the need for JavaScript. It’s elegant, lightweight, and fully customizable. Whether you’re building a team page, linking social media profiles, or adding user interactions, this design adds a polished and interactive touch to any modern website.

You can explore and edit the design live in the code editor above this post. Try changing the colors, text, or icon styles to make it your own.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.