Tooltips - WebDevTales

51 Tooltips

51Modern, responsive Tooltips for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="profile-container">
    <!-- Unique avatar icon -->
    <i class="fas fa-user-astronaut profile-avatar"></i>
    <div class="profile-tooltip">
        <h3 id='taylor-astro'  id="boomdevs_4" class="profile-name" >Taylor Astro</h3>
        <p class="profile-title">Space Explorer</p>
        <div class="profile-links">
            <a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
            <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
            <a href="#" title="Portfolio"><i class="fas fa-rocket"></i></a>
        </div>
    </div>
</div>

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle, #141e30, #243b55);
  color: #fff;
}
.profile-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

.profile-tooltip {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 10px 15px;
  width: 200px;
  position: absolute;
  z-index: 1000;
  display: none;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  text-align: left;
}

.profile-container:hover .profile-tooltip {
  display: block;
}

.profile-avatar {
  font-size: 55px;
  color: #4caf50;
  cursor: pointer;
  transition: all 0.3s ease;
}

.profile-avatar:hover {
  color: #81c784;
  transform: scale(1.2);
}

.profile-name {
  margin: 5px 0;
  font-size: 18px;
  font-weight: bold;
  color: #4caf50;
}

.profile-title {
  margin: 5px 0;
  color: #dcedc8;
  font-size: 14px;
}

.profile-links {
  display: flex;
  justify-content: space-evenly;
  margin-top: 10px;
}

.profile-links a {
  font-size: 18px;
  color: #81c784;
  text-decoration: none;
  transition: color 0.3s ease;
}

.profile-links a:hover {
  color: #c8e6c9;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="profile-container">
    <i class="fa-regular fa-user profile-avatar"></i>
    <!-- Left Sidebar -->
    <div class="sidebar left">
        <a href="#" title="Facebook"><i class="fab fa-facebook"></i></a>
        <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
        <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
    </div>
    <!-- Right Sidebar -->
    <div class="sidebar right">
        <span>Taylor Astro</span>
        <span>Space Explorer</span>
    </div>
</div>

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #000000, #15171a);
  color: #fff;
}
.profile-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

.profile-avatar {
  font-size: 35px;
  color: #4caf50;
  cursor: pointer;
  border: 3px solid #4caf50;
  border-radius: 10%;
  padding: 15px;
  transition: transform 0.5s ease;
}

.profile-avatar:hover {
  transform: rotate(10deg);
  font-size: 40px;
  border-color: aqua;
  color: aqua;
}

.sidebar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 150px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.profile-container:hover .sidebar {
  opacity: 1;
}

.sidebar.left {
  left: -70px;
}

.sidebar.right {
  right: -70px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.sidebar a {
  margin: 10px 0;
  color:  #41ffdc;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sidebar a:hover {
  color: #c8e6c9;
}

.sidebar.right span {
  font-size: 16px;
  font-weight: bold;
  color: #41ffdc;
  margin: 5px 0;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <!-- Tooltip Text -->
    <div class="tooltip">Check Our Website</div>

    <!-- Icon -->
    <i class="fas fa-play-circle icon"></i>

    <!-- Hidden Text (Visible on hover) -->
    <div class="text">WebDevTales</div>
  </div>

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000000;
    margin: 0;
  }
  
  /* Card Container */
  .card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }
  
  /* Tooltip */
  .tooltip {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: #fbbf24;
    color: #333;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* Tooltip Arrow */
  .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-0%);
    border-width: 6px;
    border-color: transparent transparent #fbbf24 transparent;
    border-style: solid;
  }
  
  /* Hover Effects */
  .card:hover .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  
  /* Icon and Text */
  .card .icon {
    font-size: 48px;
    color: #4b5563;
    transition: color 0.3s ease;
  }
  
  .card:hover .icon {
    color: #fbbf24;
  }
  
  .card .text {
    position: absolute;
    bottom: 15px;
    font-size: 14px;
    color: #4b5563;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .card:hover .text {
    opacity: 1;
  }

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip">
    <!-- Button Trigger -->
    <button type="button" aria-label="trigger" class="trigger">
      <i class="fas fa-heart"></i>
    </button>

    <!-- Tooltip Content -->
    <div class="content">
      Like <span>336</span>
    </div>
  </div>

.tooltip {
    --bg: #fff;
    --cl: #e63946;
    --sz: 1rem;
    --sizer: 44px;
    --h-cnt: calc(var(--sz) * 2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  body{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
  }

  /* Button (Trigger) */
  .trigger {
    color: var(--cl);
    background: var(--bg);
    font-weight: 600;
    cursor: pointer;
    border-radius: 10%;
    padding: calc(var(--sz) / 2);
    font-size: var(--sz);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    outline: none;
    box-shadow: 0 0 2rem rgba(219, 3, 3, 0.5);
  }

  /* Heart Icon */
  .trigger .fa-heart {
    font-size: 30px;
    color: var(--cl);
    transition: all 0.3s ease;
  }

  /* Scaling on Hover */
  .trigger:hover {
    animation: scaling 1s ease infinite;
    box-shadow: 0 0 3rem rgba(219, 3, 3, 0.8);
  }

  @keyframes scaling {
    0% {
      transform: scale(1);
    }
    20%,
    90% {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1.1);
    }
  }

  /* Tooltip Content */
  .content {
    position: absolute;
    border-radius: 20px;
    top: calc(var(--h-cnt) * -0.75);
    font-size: 14px;
    padding: calc(var(--sz) / 4) calc(var(--sz) / 2);
    z-index: -1;
    pointer-events: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: max-content;
    background-color: var(--cl);
    color: whitesmoke;
    opacity: 0;
    transform: scale(0) translate(0, 200%);
    transition: all 0.3s ease;
    font-weight: 600;
  }

  /* Tooltip Arrow */
  .content::before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    bottom: -0.2em;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
    background-color: var(--cl);
    z-index: -2;
  }

  /* Show Tooltip on Hover */
  .trigger:hover + .content {
    opacity: 1;
    transform: scale(1) translate(0%, 0%);
    pointer-events: auto;
    top: calc(var(--h-cnt) * -1.25);
  }

  /* Like Count Animation */
  .content span {
    position: relative;
    margin-left: 4px;
    font-size: 16px;
    font-weight: bold;
    animation: number-change 0.6s ease forwards;
  }

  @keyframes number-change {
    from {
      transform: translateY(10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <!-- Trigger Button -->
    <button class="trigger" aria-label="Favorite">
      <i class="fas fa-star"></i>
    </button>

    <!-- Tooltip Content -->
    <div class="tooltip-content">
      Add to Favorites
    </div>
  </div>

.tooltip-container {
    --icon-color: #ffcc00;
    --tooltip-bg: #c71010;
    --tooltip-color: #fff;
    --btn-size: 60px;
    position: relative;
    display: inline-block;
    margin: 50px;
  }

  body{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #020202;
  }

  /* Trigger Button */
  .trigger {
    background-color: var(--icon-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: var(--btn-size);
    height: var(--btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease, background-color 0.3s ease, color 0.3s ease, font-size 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
  }

  .trigger:hover {
    transform: rotate(360deg) scale(1.2) translateY(-5px);
    color: black;
    font-size: 2.5rem;
    border-radius: 10%;
    box-shadow: 0 0 32px rgba(207, 8, 8, 0.8);
    background-color: rgb(240, 11, 11);
  }

  /* Tooltip Box */
  .tooltip-content {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* Tooltip Arrow */
  .tooltip-content::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent var(--tooltip-bg) transparent transparent;
  }

  /* Show Tooltip on Hover */
  .tooltip-container:hover .tooltip-content {
    opacity: 1;
    transform: translateY(-50%) translateX(10px);
  }

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <!-- Trigger Button -->
    <button class="trigger" aria-label="Like">
      <i class="fas fa-thumbs-up"></i>
    </button>

    <!-- Tooltip Content -->
    <div class="tooltip-content">
      Give us a thumbs up!
    </div>
  </div>

.tooltip-container {
    --icon-color: #007bff;
    --tooltip-bg: #e36e07;
    --tooltip-color: #fff;
    --glow-color: rgba(0, 123, 255, 0.5);
    position: relative;
    display: inline-block;
    margin: 50px;
  }

  body{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
  }

  /* Trigger Button */
  .trigger {
    background-color: var(--icon-color);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 40px var(--glow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .trigger:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--glow-color), 0 0 30px var(--glow-color), 0 0 60px var(--glow-color);
  }

  /* Tooltip Box */
  .tooltip-content {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* Tooltip Arrow */
  .tooltip-content::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--tooltip-bg) transparent transparent transparent;
  }

  /* Show Tooltip on Hover */
  .tooltip-container:hover .tooltip-content {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <button class="trigger" aria-label="Explore">
      <i class="fas fa-globe"></i>
    </button>
    <div class="orbit">
      <i class="fas fa-moon"></i>
      <i class="fas fa-star"></i>
    </div>
    <div class="tooltip-content">Explore the Universe</div>
  </div>

.tooltip-container {
    --icon-color: #f43676;
    --tooltip-bg: #222;
    --tooltip-color: #fff;
    position: relative;
    display: inline-block;
    margin: 50px;
  }
  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #0d1b2a, #1b263b, #415a77, #778da9);
    background-size: 400% 400%;
    animation: cosmicAnimation 15s ease infinite;
    color: white;
    font-family: Arial, sans-serif;
 }

@keyframes cosmicAnimation {
0% {
  background-position: 0% 50%;
}
50% {
  background-position: 100% 50%;
}
100% {
  background-position: 0% 50%;
}
}

  .trigger {
    background-color: var(--icon-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
  }

  

  /* Orbiting Icons */
  .orbit {
    position: absolute;
    width: 110px;
    height: 150px;
    margin-top: -7rem;
    margin-left: -2rem;
    border-radius: 50%;
    animation: orbit 3s linear infinite;
  }

  .orbit i {
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 2rem;
    color: rgb(60, 0, 255);
    transform: translateX(-50%);
  }

  .orbit i:nth-child(1) {
    animation: spin 3s linear infinite;
  }

  .orbit i:nth-child(2) {
    color: white;
    margin-top: -1rem;
    animation: spin 3s linear infinite reverse;
  }

  @keyframes orbit {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes spin {
    to {
      transform: rotate(-360deg);
    }
  }
  

  /* Tooltip */
  .tooltip-content {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) rotateY(90deg);
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 0.9rem;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .tooltip-container:hover .tooltip-content {
    opacity: 1;
    transform: translateX(-50%) rotateY(0deg);
  }

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <!-- Trigger Button -->
    <button class="trigger" aria-label="Info">
      <i class="fas fa-info-circle"></i>
    </button>

    <!-- Tooltip Content -->
    <div class="tooltip-content">
      Learn More
    </div>
  </div>

.tooltip-container {
    --icon-color: #17a2b8;
    --pulse-color: rgba(23, 162, 184, 0.5);
    --tooltip-bg: #eee4e4;
    --tooltip-color: #242323;
    --btn-size: 50px;
    position: relative;
    display: inline-block;
    margin: 50px;
  }

  body{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #020202;
  }

  /* Trigger Button */
  .trigger {
    background-color: var(--icon-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: var(--btn-size);
    height: var(--btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    animation: pulse 1.5s infinite;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
  }

  @keyframes pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 var(--pulse-color);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(23, 162, 184, 0);
    }
  }

  /* Tooltip Box */
  .tooltip-content {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* Tooltip Arrow */
  .tooltip-content::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--tooltip-bg) transparent transparent transparent;
  }

  /* Show Tooltip on Hover */
  .tooltip-container:hover .tooltip-content {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <button class="trigger" aria-label="Settings">
      <i class="fas fa-cog"></i>
      <div class="panel"></div>
      <div class="panel"></div>
      <div class="panel"></div>
    </button>
    <div class="tooltip-content">Settings</div>
  </div>

.tooltip-container {
    --icon-color: linear-gradient(to right, #f30d76, #f476ad);
    --tooltip-bg: #ece4e4;
    --tooltip-color: #2a2727;
    position: relative;
    display: inline-block;
    margin: 50px;
  }

  body{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #090909;
  }

  .trigger {
    background: var(--icon-color);
    color: white;
    border: none;
    border-radius: 10%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .trigger:hover {
      background-color: #79000a;
      transform: scale(1.1) rotate(35deg);
  }

  /* Sliding Panels */
  .panel {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .panel:nth-child(1) {
    background: rgba(255, 255, 255, 0.2);
  }

  .panel:nth-child(2) {
    background: rgba(255, 255, 255, 0.3);
    transition-delay: 0.1s;
  }

  .panel:nth-child(3) {
    background: rgba(255, 255, 255, 0.4);
    transition-delay: 0.2s;
  }

  .tooltip-container:hover .panel {
    transform: translateY(0);
  }

  /* Tooltip */
  .tooltip-content {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    top: -90%;
    transform: translateX(-50%);
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .tooltip-container:hover .tooltip-content {
    opacity: 1;
  }

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <button class="trigger" aria-label="Music">
      <i class="fas fa-music"></i>
    </button>
    <div class="tooltip-content">Play Music</div>
</div>

.tooltip-container {
    --icon-color: linear-gradient(180deg, #8e2de2, #4a00e0);;
    --tooltip-bg: #ece1e1;
    --tooltip-color: #121111;
    position: relative;
    display: inline-block;
    margin: 50px;
  }

  body{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #090909;
  }


  .trigger {
    background: var(--icon-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
  }

  .trigger:hover{
    background: white;
    box-shadow: 0 0 20px white;
  }

  .trigger:hover i {
      color: #05bccd;
      animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1) rotate(-90deg) translatex(0%);
    }
    50% {
      transform: scale(2.5) rotate(360deg)  translatex(-15%);
    }
    100% {
      transform: scale(1) rotate(-90deg) translatex(0%);
    }
  }

.trigger i{
  font-size: 1rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

  

  /* Tooltip */
  .tooltip-content {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: 0.5rem 1rem;
    width: 5rem;
    border-radius: 5px;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .tooltip-container:hover .tooltip-content {
    opacity: 1;
  }

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <button class="trigger" aria-label="Search">
      <i class="fas fa-search"></i>
    </button>
    <div class="tooltip-content">
      <span>S</span><span>e</span><span>a</span><span>r</span><span>c</span><span>h</span>
    </div>
</div>

.tooltip-container {
  --icon-color: #03a9f4;
  --tooltip-bg: #03a9f4;
  --tooltip-color: #fff;
  position: relative;
  display: inline-block;
  margin: 50px;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}


/* Trigger Button */
.trigger {
  background-color: var(--icon-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Tooltip */
.tooltip-content {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltip-container:hover .tooltip-content {
  opacity: 1;
}

.tooltip-content span {
  display: inline-block;
  font-size: 0.9rem;
  animation: wave 1s ease-in-out infinite;
}

.tooltip-content span:nth-child(odd) {
  animation-delay: 0.1s;
}

.tooltip-content span:nth-child(even) {
  animation-delay: 0.2s;
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <button class="trigger" aria-label="Notifications">
      <i class="fas fa-bell"></i>
    </button>
    <div class="ring"></div>
    <div class="tooltip-content">Check Notifications</div>
  </div>

.tooltip-container {
  --icon-color: #ff5722;
  --ring-color: rgba(255, 87, 34, 0.2);
  --tooltip-bg: #333;
  --tooltip-color: #fff;
  position: relative;
  display: inline-block;
  margin: 50px;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

/* Trigger Button */
.trigger {
  background-color: var(--icon-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  position: relative;
  overflow: visible;
}

/* Rotating Ring */
.ring {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 4px solid var(--ring-color);
  border-radius: 10%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  pointer-events: none;
}



.tooltip-container:hover .ring {
  transform: translate(-50%, -50%) rotate(360deg);
  transition: transform 0.6s linear;
}

/* Tooltip */
.tooltip-content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) rotateX(90deg);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  width: 8rem;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tooltip-container:hover .tooltip-content {
  opacity: 1;
  transform: translateX(-50%) rotateX(0deg);
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <button class="trigger" aria-label="Favorite">
      <i class="fas fa-star"></i>
      <span class="tooltip-content">Mark as Favorite</span>
      <div class="particle" style="--i: 1;"></div>
      <div class="particle" style="--i: 2;"></div>
      <div class="particle" style="--i: 3;"></div>
    </button>
  </div>

.tooltip-container {
  --icon-color: #ffc107;
  --tooltip-bg: #e09705;
  --tooltip-color: #151515;
  position: relative;
  display: inline-block;
  margin: 50px;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000;
}

/* Trigger Button */
.trigger {
  background-color: var(--icon-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: background 0.5s ease, font-size 0.4s ease, border-radius 0.5s ease, transform 0.5s ease;
}

.trigger:hover{
    background: #06e8d9;
    font-size: 3rem;
    border-radius: 10%;
    transform: rotate(45deg) scale(1.1);
}



/* Tooltip */
.tooltip-content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  width: 7rem;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tooltip-container:hover .tooltip-content {
  opacity: 1;
}

/* Particle Effect */
.particle {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--icon-color);
  border-radius: 50%;
  animation: float 2s infinite ease-in-out;
}

@keyframes float {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translate(20px, -20px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(40px, -40px) scale(0);
  }
}

.tooltip-container:hover .particle {
  animation-delay: calc(-0.2s * var(--i));
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <button class="trigger" aria-label="Refresh">
      <i class="fas fa-sync-alt"></i>
    </button>
    <div class="tooltip-content">Refresh</div>
  </div>


.tooltip-container {
  --icon-color: #ff9800;
  --tooltip-bg: #333;
  --tooltip-color: #fff;
  position: relative;
  display: inline-block;
  margin: 50px;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000;
}
/* Trigger Button */
.trigger {
  background-color: var(--icon-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  perspective: 600px;
  transition: transform 0.5s ease;
}

.trigger:hover {
  transform: rotateY(180deg);
}

/* Tooltip */
.tooltip-content {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) rotateX(-90deg);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.tooltip-container:hover .tooltip-content {
  opacity: 1;
  transform: translateX(-50%) rotateX(0deg);
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="tooltip-container">
    <button class="trigger" aria-label="Add">
      <i class="fas fa-plus"></i>
    </button>
    <div class="tooltip-content">Add New</div>
  </div>


.tooltip-container {
  --icon-color: #4caf50;
  --tooltip-bg: #4caf50;
  --tooltip-color: #fff;
  --glow-color: rgba(76, 175, 80, 0.6);
  position: relative;
  display: inline-block;
  margin: 50px;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

/* Trigger Button */
.trigger {
  background-color: var(--icon-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 0 10px var(--glow-color);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.trigger:hover {
  box-shadow: 0 0 20px var(--glow-color), 0 0 30px var(--glow-color);
  transform: translateY(-5px) rotate(360deg);
}

/* Tooltip */
.tooltip-content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 0.5rem 1rem;
  width: 3.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 10px var(--glow-color);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tooltip-content::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--tooltip-bg) transparent transparent transparent;
}

.tooltip-container:hover .tooltip-content {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

<!-- No JS code needed for this Element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="tooltip-container">
    <div class="tooltip">
      <div class="profile">
        <div class="user">
          <div class="img">IG</div>
          <div class="details">
            <div class="name">User</div>
            <div class="username">@username</div>
          </div>
        </div>
        <div class="about">
          <p>500+ Followers</p>
          <p>Based in the USA</p><div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7118892695153021"
     crossorigin="anonymous"></script>
<!-- pages -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7118892695153021"
     data-ad-slot="7904551924"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

          <p>Photographer</p>
        </div>
      </div>
    </div>
    <div class="text">
      <a class="icon" href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="instagram">
            <i class="fab fa-instagram" style="font-size: 30px;"></i>
          </span>
        </div>
        <div class="text">Instagram</div>
      </a>
    </div>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #EAEAEA;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.tooltip-container {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  font-size: 17px;
  margin-top: 10rem;
  border-radius: 12px;
  background: #EAEAEA;
  box-shadow: 10px 10px 20px #D0D0D0, -10px -10px 20px #FFFFFF;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  padding: 15px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
  border-radius: 18px;
  background: #EAEAEA;
  box-shadow: 10px 10px 20px #D0D0D0, -10px -10px 20px #FFFFFF;
  z-index: 10;
}

.tooltip-container:hover .tooltip {
  transform: translateX(-50%) translateY(-200px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border: 4px double rgb(197, 192, 192);
}

.profile {
  background: #EAEAEA;
  border-radius: 10px 15px;
  padding: 15px;
  border: 1px solid #D0D0D0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 10px 10px 20px #D0D0D0, -10px -10px 20px #FFFFFF;
}

.user {
  display: flex;
  gap: 15px;
  align-items: center;
}

.img {
  width: 60px;
  height: 60px;
  font-size: 30px;
  font-weight: 700;
  border: 3px solid #D0D0D0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EAEAEA;
  transition: transform 0.3s;
  box-shadow: 5px 5px 10px #D0D0D0, -5px -5px 10px #FFFFFF;
}

.user:hover .img {
  transform: scale(1.1);
}

.details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #000;
}

.name {
  font-size: 20px;
  font-weight: 700;
  color: #262626;
}

.username {
  font-size: 16px;
  color: #8E8E8E;
}

.about {
  color: #6E6E6E;
  font-size: 14px;
}

.about p {
  margin: 0;
}

.icon {
  text-decoration: none;
  color: #000;
  display: block;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.icon .layer {
  width: 65px;
  height: 65px;
  border: 3px solid #D0D0D0;
  border-radius: 50%;
  transition: transform 0.3s, border 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 5px 5px 10px #D0D0D0, -5px -5px 10px #FFFFFF;
}

.icon:hover .layer {
  transform: rotate(-40deg) skew(25deg);
  box-shadow: 10px 10px 20px #D0D0D0, -10px -10px 20px #FFFFFF;
}

.layer span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid rgba(242, 24, 155, 0.8);
  border-radius: 50%;
  transition: all 0.3s;
  opacity: 0;
}

.layer span:nth-child(1) {
  transition-delay: 0.05s;
  opacity: 0.1;
}

.layer span:nth-child(2) {
  transition-delay: 0.1s;
  opacity: 0.2;
}

.layer span:nth-child(3) {
  transition-delay: 0.15s;
  opacity: 0.3;
}

.layer span:nth-child(4) {
  transition-delay: 0.2s;
  opacity: 0.4;
}

.layer span:nth-child(5) {
  transition-delay: 0.25s;
  opacity: 0.5;
}

.icon:hover .layer span {
  opacity: 1;
}

.instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EAEAEA;
  border-radius: 50%;
  color:  #8a3ab9;
  box-shadow: 5px 5px 10px #D0D0D0, -5px -5px 10px #FFFFFF;
}

.tooltip-container:hover .instagram{
      color: #e95950;
    }
    .tooltip-container:hover .icon .layer span {
      border-color: #e95950;
    }
    .icon .text {
      position: absolute;
      left: 50%;
      bottom: -5px;
      opacity: 0;
      font-weight: 500;
      transform: translateX(-50%);
      color: #e95950;
      transition: bottom 0.3s ease, opacity 0.3s ease;
    }

.icon:hover .text {
  bottom: -40px;
  opacity: 1;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<div class="tooltip-container">
  <div class="tooltip">
    <div class="profile">
      <div class="user">
        <div class="img">Fb</div>
        <div class="details">
          <div class="name">User</div>
          <div class="username">@username</div>
        </div>
      </div>
      <div class="about">
        <p>500+ Friends</p>
        <p>Based in the USA</p>
        <p>Web Developer</p>
      </div>
    </div>
  </div>
  <div class="text">
    <a class="icon" href="#">
      <div class="layer">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="facebookSVG">
          <svg
            viewBox="0 0 40 40"
            xml:space="preserve"
            xmlns="http://www.w3.org/2000/svg"
          >
            <linearGradient
              gradientUnits="userSpaceOnUse"
              gradientTransform="matrix(40 0 0 -39.7778 11115.001 16212.334)"
              y2="407.5726"
              y1="406.6018"
              x2="-277.375"
              x1="-277.375"
              id="a"
            >
              <stop stop-color="#0062e0" offset="0"></stop>
              <stop stop-color="#19afff" offset="1"></stop>
            </linearGradient>
            <path
              d="M16.7 39.8C7.2 38.1 0 29.9 0 20 0 9 9 0 20 0s20 9 20 20c0 9.9-7.2 18.1-16.7 19.8l-1.1-.9h-4.4l-1.1.9z"
              fill="url(#a)"
            ></path>
            <path
              d="m27.8 25.6.9-5.6h-5.3v-3.9c0-1.6.6-2.8 3-2.8H29V8.2c-1.4-.2-3-.4-4.4-.4-4.6 0-7.8 2.8-7.8 7.8V20h-5v5.6h5v14.1c1.1.2 2.2.3 3.3.3 1.1 0 2.2-.1 3.3-.3V25.6h4.4z"
              fill="#fff"
            ></path>
          </svg>
        </span>
      </div>
      <div class="text">Facebook</div>
    </a>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #212121;
  margin: 0;
  overflow: hidden;
}

.tooltip-container {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  font-size: 17px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(24, 119, 242, 0.3);
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  padding: 15px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
  border-radius: 18px;
  background: #1E1E1E;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 10px 20px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.tooltip-container:hover .tooltip {
  transform: translateX(-50%) translateY(-100px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border: 5px double #1877f2;
}

.profile {
  background: #3b5998;
  border-radius: 10px 15px;
  padding: 15px;
  border: 1px solid #29487d;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user {
  display: flex;
  gap: 15px;
  align-items: center;
}

.img {
  width: 60px;
  height: 60px;
  font-size: 30px;
  font-weight: 700;
  border: 2px solid #1877f2;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: transform 0.3s;
}

.user:hover .img {
  transform: scale(1.1);
}

.details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #fff;
}

.name {
  font-size: 20px;
  font-weight: 700;
  color: #1877f2;
}

.username {
  font-size: 16px;
  color: #6F6F6F;
}

.about {
  color: #ccc;
  font-size: 14px;
}

.about p {
  margin: 0;
}

.icon {
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.icon .layer {
  width: 65px;
  height: 65px;
  border: 3px solid #1877f2;
  border-radius: 50%;
  transition: transform 0.3s, border 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 15px rgba(24, 119, 242, 0.7), 0 0 20px rgba(24, 119, 242, 0.5);
}

.icon:hover .layer {
  transform: rotate(-40deg) skew(25deg);
  box-shadow: 0 0 35px rgba(24, 119, 242, 1), 0 0 45px rgba(24, 119, 242, 0.7);
}

.layer span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid rgba(24, 119, 242, 0.8);
  border-radius: 50%;
  transition: all 0.3s;
  opacity: 0;
}

.layer span:nth-child(1) {
  transition-delay: 0.05s;
  opacity: 0.1;
}

.layer span:nth-child(2) {
  transition-delay: 0.1s;
  opacity: 0.2;
}

.layer span:nth-child(3) {
  transition-delay: 0.15s;
  opacity: 0.3;
}

.layer span:nth-child(4) {
  transition-delay: 0.2s;
  opacity: 0.4;
}

.layer span:nth-child(5) {
  transition-delay: 0.25s;
  opacity: 0.5;
}

.icon:hover .layer span {
  opacity: 1;
}

.facebookSVG {
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1877f2;
  border-radius: 50%;
  background: linear-gradient(
    45deg,
    #1877f2 0%,
    #3b5998 25%,
    #1877f2 50%,
    #3b5998 75%,
    #1877f2 100%
  );
}

.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: -40px;
  opacity: 1;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="tooltip-container">
    <div class="twitter-tooltip">
      <div class="twitter-profile">
        <div class="twitter-user">
          <div class="twitter-img">TW</div>
          <div class="twitter-details">
            <div class="twitter-name">User</div>
            <div class="twitter-username">@twitteruser</div>
          </div>
        </div>
        <div class="twitter-about">
          <p>300+ Followers</p>
          <p>Based in the USA</p>
          <p>Developer</p>
        </div>
      </div>
    </div>
    <div class="text">
      <a class="icon" href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="twitter">
            <i class="fab fa-twitter" style="font-size: 30px;"></i>
          </span>
        </div>
        <div class="text">Twitter</div>
      </a>
    </div>
  </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.tooltip-container {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  font-size: 17px;
  margin-top: 10rem;
  border-radius: 12px;
  
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  padding: 15px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.2); /* Glassmorphism background */
  backdrop-filter: blur(10px); /* Blur effect */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.tooltip-container:hover .tooltip {
  transform: translateX(-50%) translateY(-200px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border: 4px double rgba(29, 161, 242, 0.8); /* Twitter blue border */
}

.profile {
  background: rgba(22, 21, 21, 0.2); /* Glassmorphism background */
  backdrop-filter: blur(10px); /* Blur effect */
  border-radius: 10px 15px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.1);
}

.user {
  display: flex;
  gap: 15px;
  align-items: center;
}

.img {
  width: 60px;
  height: 60px;
  font-size: 30px;
  font-weight: 700;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2); /* Glassmorphism background */
  backdrop-filter: blur(10px); /* Blur effect */
  transition: transform 0.3s;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.1);
}

.user:hover .img {
  transform: scale(1.1);
}

.details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #000;
}

.name {
  font-size: 20px;
  font-weight: 700;
  color: #262626;
}

.username {
  font-size: 16px;
  color: #8E8E8E;
}

.about {
  color: #6E6E6E;
  font-size: 14px;
}

.about p {
  margin: 0;
}

.icon {
  text-decoration: none;
  color: #000;
  display: block;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.icon .layer {
  width: 65px;
  height: 65px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: transform 0.3s, border 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.1);
}

.icon:hover .layer {
  transform: rotate(-40deg) skew(25deg);
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.1);
}

.layer span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid rgba(29, 161, 242, 0.8); /* Twitter blue border */
  border-radius: 50%;
  transition: all 0.3s;
  opacity: 0;
}

.layer span:nth-child(1) {
  transition-delay: 0.05s;
  opacity: 0.1;
}

.layer span:nth-child(2) {
  transition-delay: 0.1s;
  opacity: 0.2;
}

.layer span:nth-child(3) {
  transition-delay: 0.15s;
  opacity: 0.3;
}

.layer span:nth-child(4) {
  transition-delay: 0.2s;
  opacity: 0.4;
}

.layer span:nth-child(5) {
  transition-delay: 0.25s;
  opacity: 0.5;
}

.icon:hover .layer span {
  opacity: 1;
}

.twitter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2); /* Glassmorphism background */
  backdrop-filter: blur(10px); /* Blur effect */
  border-radius: 50%;
  color: #1DA1F2;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.1);
}

.tooltip-container:hover .twitter {
  color: #1DA1F2;
}

.tooltip-container:hover .icon .layer span {
  border-color: #1DA1F2;
}

.icon .text {
  position: absolute;
  left: 50%;
  bottom: -5px;
  opacity: 0;
  font-weight: 500;
  transform: translateX(-50%);
  color: #1DA1F2;
  transition: bottom 0.3s ease, opacity 0.3s ease;
}

.icon:hover .text {
  bottom: -40px;
  opacity: 1;
}

.twitter-tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  padding: 15px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.2); /* Glassmorphism background */
  backdrop-filter: blur(10px); /* Blur effect */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.tooltip-container:hover .twitter-tooltip {
  transform: translateY(-100%) translateX(-150px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: movingBorders 1s linear infinite;
  border: 4px double rgba(29, 161, 242); /* Twitter blue border */
}

@keyframes movingBorders {
  0%, 100% {
    border-width: 5px;
    border-color: #1DA1F2;
  }
  25% {
    border-width: 7px;
    border-color: #ff2b9c;
  }
  50% {
    border-width: 8px;
    border-color: #23ffd7;
  }
  75% {
    border-width: 6px;
    border-color: #ff2382;
  }
}

.twitter-profile {
  background: rgba(255, 255, 255, 0.1); /* Glassmorphism background */
  backdrop-filter: blur(10px); /* Blur effect */
  border-radius: 10px 15px;
  padding: 15px;
  border: 5px double #1DA1F2;
  animation: movingBorders 1s linear infinite;
  animation-delay: 0.5s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.1);
}

.twitter-user {
  display: flex;
  gap: 15px;
  align-items: center;
}

.twitter-img {
  width: 60px;
  height: 60px;
  font-size: 30px;
  font-weight: 700;
  border: 3px solid #1DA1F2;
  border-radius: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2); /* Glassmorphism background */
  backdrop-filter: blur(10px); /* Blur effect */
  transition: transform 0.3s;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.1);
}

.twitter-user:hover .twitter-img {
  transform: scale(1.1);
}

.twitter-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #ffffff;
}

.twitter-name {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.twitter-username {
  font-size: 16px;
  color: #ffffff;
}

.twitter-about {
  color: #ffffff;
  font-size: 14px;
}

.twitter-about p {
  margin: 0;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="profile-container">
    <img decoding="async" src="https://images.nightcafe.studio/jobs/XCI50bkYYVCGadsCMfzq/XCI50bkYYVCGadsCMfzq--0--o6zac.jpg?tr=w-1600,c-at_max" alt="Profile Picture" class="profile-avatar">
    <div class="profile-tooltip">
        <img decoding="async" src="https://images.nightcafe.studio/jobs/XCI50bkYYVCGadsCMfzq/XCI50bkYYVCGadsCMfzq--0--o6zac.jpg?tr=w-1600,c-at_max" alt="Profile Picture" class="profile-avatar">
        <h3 id='john-doe'  id="boomdevs_41" class="profile-name" >John Doe</h3>
        <p class="profile-title">Software Engineer</p>
        <p class="profile-location">San Francisco, CA</p><div class="profile-container">
        <p class="profile-bio">Experienced software engineer with a focus on web development. Passionate about creating scalable and user-friendly applications.</p>
        <div class="profile-links">
            <a href="https://www.linkedin.com/in/johndoe" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i> LinkedIn</a>
            <a href="https://github.com/johndoe" target="_blank" rel="noopener"><i class="fab fa-github"></i> GitHub</a>
        </div>
    </div>
</div>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: #333;
}
.profile-container {
  position: relative;
  top: -30%;
  left: -20%;
  display: inline-block;
}

.profile-tooltip {
  background-color: #000000;
  border: 1px solid #1dffa1;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: 250px;
  position: absolute;
  z-index: 1000;
  display: none;
  top: 100%;
  left: 0;
}

.profile-container:hover .profile-tooltip {
  display: block;
}

.profile-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  border: 3px solid #25ffc5;
  margin-bottom: 10px;
}

.profile-avatar:hover {
  border: 5px double #16ff8e;
}

.profile-name {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: bold;
  color: #25ffc5;
}

.profile-title, .profile-location {
  margin: 0 0 5px;
  color: #dfd9d9;
  font-size: 14px;
}

.profile-bio {
  margin: 0 0 10px;
  color: #c8c5c5;
  font-size: 12px;
  position: relative;
  left: 20%;
  line-height: 1.5;
}

.profile-links a {
  display: inline-block;
  margin-right: 10px;
  color: #007bff;
  position: relative;
  left: 20%;
  text-decoration: none;
}

.profile-links a:hover {
  color: aqua;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="profile-container">
    <!-- New glowing avatar icon -->
    <i class="fas fa-user-ninja profile-avatar"></i>
    <div class="profile-tooltip">
        <i class="fas fa-user-ninja profile-avatar"></i>
        <h3 id='alex-ninja'  id="boomdevs_44" class="profile-name" >Alex Ninja</h3>
        <p class="profile-title">Cybersecurity Specialist</p>
        <p class="profile-location">Tokyo, Japan</p>
        <p class="profile-bio">Expert in cybersecurity with 10+ years of experience protecting digital landscapes and preventing cyber threats.</p>
        <div class="profile-links">
            <a href="https://www.linkedin.com/in/alexninja" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i> LinkedIn</a>
            <a href="https://github.com/alexninja" target="_blank" rel="noopener"><i class="fab fa-github"></i> GitHub</a>
            <a href="https://alexninja.dev" target="_blank" rel="noopener"><i class="fas fa-globe"></i> Website</a>
        </div>
    </div>
  </div>

        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(135deg, #000000, #2b2c2e);
            color: #fff;
        }
        .profile-container {
            position: relative;
            top: -30%;
            display: inline-block;
            text-align: center;
        }

        .profile-tooltip {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            padding: 20px;
            width: 250px;
            position: absolute;
            z-index: 1000;
            display: none;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        }

        .profile-container:hover .profile-tooltip {
            display: block;
        }

        .profile-avatar {
            font-size: 40px;
            color: #ffcc00;
            padding: 10px;
            cursor: pointer;
            margin-top: -15px;
            transition: all 0.3s ease;
        }

        .profile-avatar:hover {
            color: #ff7b00;
            transform: scale(1.1);
            transition: all 0.3s ease;
        }

        .profile-name {
            margin: 0 0 5px;
            font-size: 18px;
            font-weight: bold;
            color: #ffcc00;
        }

        .profile-title, .profile-location {
            margin: 5px 0;
            color: #f0f0f0;
            font-size: 12px;
        }

        .profile-bio {
            margin: 10px 0 15px;
            color: #e0e0e0;
            font-size: 11px;
            line-height: 1.6;
            margin-bottom: -2px;
        }

        .profile-links a {
            display: inline-block;
            margin: 5px;
            padding: 8px 11px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            text-decoration: none;
            font-size: 12px;
            transition: background 0.3s ease;
        }

        .profile-links a:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="profile-container">
    <!-- Compact avatar icon -->
    <i class="fas fa-user-tie profile-avatar"></i>
    <div class="profile-tooltip">
        <h3 id='chris-taylor'  id="boomdevs_47" class="profile-name" >Chris Taylor</h3>
        <p class="profile-title">Product Manager</p>
        <div class="profile-links">
            <a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
            <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
            <a href="#" title="Portfolio"><i class="fas fa-briefcase"></i></a>
        </div>
    </div>
</div>

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #2e2e2e;
  color: #fff;
}
.profile-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

.profile-tooltip {
  background: #1c1c1c;
  border: none;
  border-radius: 10px;
  padding: 15px;
  width: 220px;
  position: absolute;
  z-index: 1000;
  display: none;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.profile-container:hover .profile-tooltip {
  display: block;
}

.profile-avatar {
  font-size: 50px;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.profile-avatar:hover {
  transform: scale(1.1);
}

.profile-name {
  margin: 5px 0;
  font-size: 16px;
  font-weight: bold;
  color: #e9e8e7;
}

.profile-title {
  margin: 5px 0;
  color: #bdbdbd;
  font-size: 13px;
}

.profile-links {
  margin-top: 10px;
}

.profile-links a {
  display: inline-block;
  margin: 0 5px;
  font-size: 16px;
  color: #3ef781;
  text-decoration: none;
  transition: color 0.3s ease;
}

.profile-links a:hover {
  color: #38a2ff;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="tooltip-container">
  <div class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path d="M13 0h-2v12h2zm-4 2h2v8h-2zm4 4h-2v4h2z"/>
    </svg>
  </div>
  <div class="tooltip-text">This is a Tooltip!</div>
</div>

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #121212;
}

.tooltip-container {
  position: relative;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  cursor: pointer;
  transition: all 0.2s;
  font-size: 17px;
  width: 70px; /* Increased size */
  height: 70px; /* Increased size */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.tooltip-text {
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  opacity: 0;
  visibility: hidden;
  padding: 15px;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  color: #fff;
  font-size: 16px;
  width: 8rem;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease-out;
}

.tooltip-container:hover .tooltip-text {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.icon {
  width: 40px; /* Adjusted size of icon */
  height: 40px; /* Adjusted size of icon */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
  cursor: pointer;
  transition: 0.4s ease-in-out;
  border-radius: 50%;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Added shadow */
}

.tooltip-container:hover .icon {
  transform: rotate(360deg);
  transition: 0.5s linear;
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="tooltip-container">
    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
        <path d="M11 2h2v10h-2zm-4 2h2v6h-2zm4 4h-2v4h2z"/>
      </svg>
    </div>
    <div class="tooltip-text">Click Me!</div>
    <div class="tooltip-arrow"></div>
  </div>

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #232323;
  }

  .tooltip-container {
    position: relative;
    cursor: pointer;
    display: inline-block;
  }

  .tooltip-text {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0;
    visibility: hidden;
    background-color: #ff6b6b;
    background-image: linear-gradient(145deg, #ff6b6b 0%, #ff9a9a 100%);
    color: white;
    font-size: 14px;
    padding: 12px 18px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease-out;
  }

  .tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #ff6b6b;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }

  .tooltip-container:hover .tooltip-text {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    visibility: visible;
    animation: bounceIn 0.6s ease-out;
  }

  .tooltip-container:hover .tooltip-arrow {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) rotate(180deg);
  }

  .tooltip-container:hover .icon {
    transform: rotate(360deg);
    transition: 0.5s linear;
  }

  .icon {
    width: 60px;
    height: 60px;
    background-color: #1abc9c;
    background-image: linear-gradient(145deg, #1abc9c 0%, #16a085 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }

  /* Bounce-in effect */
  @keyframes bounceIn {
    0% {
      transform: translateX(-50%) scale(0);
      opacity: 0;
    }
    50% {
      transform: translateX(-50%) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) scale(1);
      opacity: 1;
    }
  }

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="profile-container">
    <div class="profile-avatar">JD</div>
    <div class="card card-top-left">
        <div class="card-content">Creative Thinker & Designer</div>
    </div>
    <div class="card card-bottom-right">
        <div class="card-content">
            <a href="#" target="_blank">LinkedIn</a> |
            <a href="#" target="_blank">GitHub</a>
        </div>
    </div>
</div>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: #2c3e50;
}

.profile-container {
  position: relative;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  background: #1abc9c;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.card {
  position: absolute;
  width: 150px;
  height: 100px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
}

.card-top-left {
  top: -120px;
  left: -130px;
}

.card-bottom-right {
  bottom: -120px;
  right: -130px;
}

.profile-container:hover .card {
  opacity: 1;
  transform: scale(1);
}

.card-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #ecf0f1;
  font-size: 16px;
  text-align: center;
}

.card-content a {
  color: #1abc9c;
  text-decoration: none;
}

.card-content a:hover {
  text-decoration: underline;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="profile-container">
    <div class="profile-avatar">AD</div>
    <div class="horizontal-bar horizontal-bar-left">
        <span>Areeb - Designer</span>
    </div>
    <div class="horizontal-bar horizontal-bar-right"> 
        <a href="#" title="Facebook"><i class="fab fa-facebook"></i></a>
        <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
        <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
    </div>
</div>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222831;
  color: #fff;
}

.profile-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  border: 3px solid #f96d00;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.horizontal-bar {
  position: absolute;
  height: 50px;
  width: 140px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border-radius: 5px;
  transition: all 0.3s ease;
  opacity: 0;
}

.horizontal-bar-left {
  left: -150px;
}

.horizontal-bar-right {
  right: -150px;
}

.profile-container:hover .horizontal-bar {
  opacity: 1;
}

.horizontal-bar-left span {
  font-size: 16px;
  font-weight: bold;
  color: #f96d00;
}

.horizontal-bar-right a {
  color: #fff;
  font-size: 18px;
  margin: 0 7px;
  text-decoration: none;
}

.horizontal-bar-right a:hover {
  color: #f96d00;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="profile-container">
    <div class="profile-avatar">AB</div>
    <div class="tooltip-circle">
        <div class="tooltip-name">Alex Brown</div>
        <div class="tooltip-title">Frontend Developer</div>
        <div class="tooltip-icons">
            <a href="#" title="Dribbble"><i class="fab fa-dribbble"></i></a>
            <a href="#" title="Behance"><i class="fab fa-behance"></i></a>
            <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
        </div>
    </div>
</div>

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to bottom, #141e30, #243b55);
  color: #fff;
}

.profile-container {
  position: relative;
  text-align: center;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #ff7eb3, #ff758c);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  position: relative;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1);
}

.profile-avatar:hover {
  box-shadow: 0 0 30px 10px rgba(255, 117, 140, 0.8);
}

.tooltip-circle {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 5;
  top: -75px;
  left: -75px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.profile-container:hover .tooltip-circle {
  display: flex;
  animation: pulse 0.6s infinite alternate;
}

@keyframes pulse {
  from {
      transform: scale(1);
  }
  to {
      transform: scale(1.1);
  }
}

.tooltip-name {
  font-size: 20px;
  font-weight: bold;
  color: #ff7eb3;
  margin-bottom: 5px;
}

.tooltip-title {
  font-size: 14px;
  color: #fff;
  margin-bottom: 125px;
}

.tooltip-icons {
  display: flex;
  gap: 20px;
}

.tooltip-icons a {
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s, color 0.3s ease;
}

.tooltip-icons a:hover {
  transform: scale(1.2);
  color: #ff7eb3;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <div class="avatar">
        <span>J</span>
    </div>
    <div class="tooltip">
        <p>Hey there, I'm Jane!</p>
        <div class="social-icons">
            <i class="fab fa-facebook"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
        </div>
    </div>
</div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
  margin: 0;
}

.avatar-container {
  position: relative;
  display: inline-block;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 10px solid #ffc01f;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.avatar span {
  font-size: 60px;
  color: #ffc01f;
  font-weight: 900;
  transition: color 0.3s ease;
  }
  .avatar:hover span {
  color: #ffffff;
  }

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffdd59;
  color: #333;
  padding: 10px 10px;
  border-radius: 15px;
  width: 6rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-size: 14px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: #ffdd59 transparent transparent transparent;
}

.avatar-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
  animation: bubble-pop 0.5s ease-out, wobble 0.6s ease-in-out 0.5s forwards;
}

.social-icons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.social-icons i {
  font-size: 18px;
  color: #333;
  cursor: pointer;
}
.social-icons i:hover {
  color: #4affa4;
}
@keyframes bubble-pop {
  0% {
      transform: translateX(-50%) scale(0);
      opacity: 0;
  }
  100% {
      transform: translateX(-50%) scale(1);
      opacity: 1;
  }
}

@keyframes wobble {
  0% {
      transform: translateX(-50%) scale(1) rotate(0deg);
  }
  15% {
      transform: translateX(-50%) scale(1) rotate(10deg);
  }
  30% {
      transform: translateX(-50%) scale(1) rotate(-10deg);
  }
  45% {
      transform: translateX(-50%) scale(1) rotate(5deg);
  }
  60% {
      transform: translateX(-50%) scale(1) rotate(-5deg);
  }
  100% {
      transform: translateX(-50%) scale(1) rotate(0deg);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <div class="avatar">
        <i class="fas fa-plane planeIcon"></i>
    </div>
    <div class="tooltip">
        <p>Book your flight ticket now!</p>
        <div class="social-icons">
            <i class="fab fa-facebook"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
        </div>
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background: #f2f2f2;
  margin: 0;
}

.avatar-container {
  position: relative;
  display: inline-block;
  transition: transform 0.2s ease;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 10%;
  background-color: #02408a;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-top: -3rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.avatar i {
  font-size: 45px;
  color: white;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.avatar-container:hover .avatar {
  transform: scale(1.1);
  background-color: #f2f2f2;
  box-shadow: none;
}

.avatar-container:hover .planeIcon {
  transform: rotate(90deg);
  color: #02408a;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  background: linear-gradient(135deg, #00bcd4, #009688);
  color: white;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-size: 16px;
  text-align: center;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #00bcd4 transparent;
}

.avatar-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

.tooltip p {
  font-weight: bold;
  margin-bottom: 15px;
}

.social-icons {
  margin-top: 10px;
  display: flex;
  gap: 15px;
  justify-content: center;
  animation: icon-bounce 1.2s infinite;
}

.social-icons i {
  font-size: 22px;
  color: white;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.social-icons i:hover {
  transform: translateY(-5px);
}

@keyframes icon-bounce {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-5px);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <div class="avatar">
        <!-- User Icon instead of image -->
        <i class="fas fa-user"></i>
    </div>
    <div class="panel">
        <h2 id='hi-i-m-jane'  id="boomdevs_64" >Hi, I'm Jane!</h2>
        <p>Web Developer | Designer</p>
        <div class="social-icons">
            <a href="https://www.linkedin.com" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i> LinkedIn</a>
            <a href="https://github.com" target="_blank" rel="noopener"><i class="fab fa-github"></i> GitHub</a>
            <a href="mailto:janedoe@example.com"><i class="fas fa-envelope"></i> Email</a>
        </div>
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #121212;
  margin: 0;
  overflow: hidden;
}

.avatar-container {
  position: relative;
  top: -30%;
  left: -20%;
  display: inline-block;
  cursor: pointer;
  margin-top: 30px; /* Position avatar a little below the top */
  transition: transform 0.3s ease;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #00ff99; /* Neon Green */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(0, 255, 153, 0.8);
  transition: all 0.3s ease;
}

.avatar i {
  font-size: 30px;
  color: white;
}

.avatar-container:hover .avatar {
  transform: scale(1.2);
  background-color: transparent;
  border: 2px solid #00ff99;
  box-shadow: 0 0 25px rgba(0, 255, 153, 1);
}

.panel {
  position: absolute;
  top: 60px;
  left: -1000px; /* Hidden off-screen initially */
  width: 200px;
  background-color: #333;
  color: white;
  padding: 15px;
  box-shadow: 0 0 10px rgba(0, 255, 153, 0.5);
  border-left: 3px solid #00ff99; /* Neon Green Border */
  transition: left 0.8s ease-in-out, opacity 0.4s ease;
  opacity: 0;
}

.avatar-container:hover .panel {
  left: 0; /* Slides in when avatar is hovered */
  opacity: 1;
}

.panel h2 {
  font-size: 18px;
  margin-top: 0;
  font-weight: bold;
  color: #00ff99;
}

.panel p {
  font-size: 14px;
  margin: 10px 0;
}

.social-icons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.social-icons a {
  color: #00ff99;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
  color: white;
  transform: translateX(5px);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <div class="avatar">
        <!-- User Icon instead of image -->
        <i class="fas fa-user"></i>
    </div>
    <div class="panel">
        <h2 id='areeb-anwar'  id="boomdevs_67" >Areeb Anwar</h2>
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #0d0d0d;
  margin: 0;
  overflow: hidden;
}

.avatar-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.avatar {
  width: 60px;
  height: 60px;
  background: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px; /* Rounded square */
  border: 2px solid #f43676; /* Neon Green Border */
  box-shadow: 0 0 20px rgba(255, 29, 123, 0.8);
  transition: all 0.3s ease, transform 0.4s ease;
}

.avatar i {
  font-size: 30px;
  color: #f43676;
}

.avatar-container:hover .avatar {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 0 25px rgb(255, 0, 132), 0 0 40px rgba(255, 0, 208, 0.5);
}

.panel {
  position: absolute;
  top: 60px;
  right: -1250px; /* Hidden off-screen initially */
  width: 120px;
  background-color: #1a1a1a;
  color: white;
  box-shadow: 0 0 10px rgba(254, 53, 157, 0.5);
  border-right: 3px solid #f43676; /* Neon Green Border */
  transition: right 0.6s ease-in-out, opacity 0.4s ease;
  opacity: 0;
}

.avatar-container:hover .panel {
  right: 0; /* Slides in from the right */
  opacity: 1;
}

.panel h2 {
  font-size: 18px;
  margin-top: 0;
  font-weight: bold;
  color: #f43676;
  padding-left: 0.2rem;
  padding-top: 0.6rem;
  text-shadow: 0 0 5px #f43676;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <div class="avatar">
        <!-- User Icon -->
        <i class="fas fa-user"></i>
    </div>
    <div class="panel">
        <h2 id='hello-i-m-alex'  id="boomdevs_70" >Hello, I'm Alex!</h2>
        <p>Creative Technologist</p>
        <div class="social-icons">
            <a href="https://www.linkedin.com" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>
            <a href="https://github.com" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>
            <a href="mailto:someone@example.com"><i class="fas fa-envelope"></i></a>
        </div>
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at center, #000428, #004e92);
  position: relative;
}

/* Background Stars */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  animation: twinkle 5s infinite alternate;
}


.avatar-container {
  position: relative;
  cursor: pointer;
}

.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #121212;
  border: 3px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}

.avatar::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #00ff99;
  animation: orbit 2s linear infinite;
}

.avatar-container:hover .avatar {
  transform: scale(1.2);
  box-shadow: 0 0 30px rgba(0, 255, 153, 1), 0 0 50px rgba(0, 255, 153, 0.5);
}

@keyframes orbit {
  0% {
      transform: scale(1) rotate(0deg);
  }
  100% {
      transform: scale(1.3) rotate(360deg);
  }
}

.avatar i {
  font-size: 32px;
  color: #00ff99;
  z-index: 2;
}

.panel {
  position: absolute;
  bottom: -700px; /* Hidden below initially */
  left: 50%;
  transform: translateX(-50%) rotate(-10deg);
  width: 250px;
  background: #1a1a1a;
  border: 2px solid #00ff99;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 255, 153, 0.6);
  padding: 20px;
  color: white;
  opacity: 0;
  transition: all 0.6s ease-in-out;
}

.avatar-container:hover .panel {
  bottom: 80px; /* Slides up diagonally */
  opacity: 1;
  transform: translateX(-50%) rotate(0deg);
}

.panel h2 {
  font-size: 18px;
  margin: 0 0 10px;
  font-weight: bold;
  color: #00ff99;
}

.panel p {
  font-size: 14px;
  margin: 5px 0 15px;
}

.social-icons {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 10px;
}

.social-icons a {
  color: #00ff99;
  font-size: 18px;
  transition: all 0.3s ease;
  position: relative;
}

.social-icons a:hover {
  animation: zigzag 0.6s ease infinite;
}

@keyframes zigzag {
  0%, 100% {
      transform: translateX(0);
  }
  25% {
      transform: translateX(-5px);
  }
  50% {
      transform: translateX(5px);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <div class="avatar">
        <!-- User Icon -->
        <i class="fas fa-graduation-cap"></i>
    </div>
    <div class="tooltip" id="tooltip">
        <div class="tooltip-icons">
            <a href="https://www.linkedin.com" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>
            <a href="https://github.com" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>
            <a href="mailto:example@example.com"><i class="fas fa-envelope"></i></a>
            <a href="#"><i class="fas fa-lightbulb"></i></a>
            <a href="#"><i class="fas fa-code"></i></a>
            <a href="#"><i class="fas fa-book"></i></a>
        </div>
    </div>
  </div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0d0d2b;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.avatar-container {
  position: relative;
  cursor: pointer;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff4500, #e91e63, #0077ff);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar i {
  font-size: 36px;
  color: white;
}

.avatar-container:hover .avatar {
  transform: scale(1.2);
  box-shadow: 0 0 40px rgba(255, 69, 0, 1);
}

/* Circular Tooltip */
.tooltip {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
  animation: rotate 6s linear infinite;
}

.avatar-container:hover .tooltip {
  display: flex; /* Show tooltip on avatar hover */
}

/* Icons Around Circular Path */
.tooltip-icons {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.tooltip-icons a {
  position: absolute;
  color: #ff4500;
  text-decoration: none;
  font-size: 28px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.tooltip-icons a:hover {
  color: #00c0ff;
  transform: scale(1.2);
}

/* Icon Positions (Circular Layout) */
.tooltip-icons a:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tooltip-icons a:nth-child(2) {
  top: 25%;
  right: 0;
  transform: translate(50%, -50%);
}

.tooltip-icons a:nth-child(3) {
  bottom: 25%;
  right: 0;
  transform: translate(50%, 50%);
}

.tooltip-icons a:nth-child(4) {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.tooltip-icons a:nth-child(5) {
  bottom: 25%;
  left: 0;
  transform: translate(-50%, 50%);
}

.tooltip-icons a:nth-child(6) {
  top: 25%;
  left: 0;
  transform: translate(-50%, -50%);
}

/* Rotation Animation */
@keyframes rotate {
  0% {
      transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
      transform: translate(-50%, -50%) rotate(360deg);
  }
}

const tooltip = document.getElementById("tooltip");
const icons = document.querySelectorAll(".tooltip-icons a");

// Pause rotation when hovering over any icon
icons.forEach(icon => {
    icon.addEventListener("mouseenter", () => {
        tooltip.style.animationPlayState = "paused";
    });
    icon.addEventListener("mouseleave", () => {
        tooltip.style.animationPlayState = "running";
    });
});

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <div class="avatar">
        <i class="fas fa-rocket"></i>
    </div>
    <div class="tooltip">
        <div class="tooltip-icons">
            <a href="https://www.linkedin.com" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>
            <a href="https://github.com" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>
            <a href="mailto:example@example.com"><i class="fas fa-envelope"></i></a>
            <a href="#"><i class="fas fa-lightbulb"></i></a>
            <a href="#"><i class="fas fa-code"></i></a>
            <a href="#"><i class="fas fa-book"></i></a>
        </div>
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #111;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.avatar-container {
  position: relative;
  cursor: pointer;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 10%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #f43676;
  box-shadow: 0 0 20px rgba(255, 28, 130, 0.8), 0 0 40px rgba(27, 255, 213, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar i {
  font-size: 40px;
  color: white;
  animation: pulse 2s infinite;
}

.avatar-container:hover .avatar {
  transform: scale(1.2);
  box-shadow: 0 0 50px rgb(255, 22, 138), 0 0 80px rgb(23, 243, 255);
}

/* Tooltip Wrapper */
.tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.avatar-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* Tooltip Icons */
.tooltip-icons a {
  position: absolute;
  width: 50px;
  height: 50px;
  background: transparent;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10%;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
  text-decoration: none;
  border: 3px solid #f43676;
  font-size: 18px;
  transition: transform 0.8s ease, opacity 0.5s ease, background 0.3s ease;
  opacity: 0;
}

.tooltip-icons a:hover {
  transform: scale(1.2);
  background: #f43676;
  border-color: #ffffff;
  }

/* Left Sidebar Icons */
.tooltip-icons a:nth-child(1) {
  left: -40px;
  top: 20%;
  transform: translate(-40px, 0);
}

.avatar-container:hover .tooltip-icons a:nth-child(1) {
  transform: translate(-150px, -80px);
  opacity: 1;
}

.tooltip-icons a:nth-child(2) {
  left: -40px;
  top: 50%;
  transform: translate(-40px, 0);
}

.avatar-container:hover .tooltip-icons a:nth-child(2) {
  transform: translate(-150px, 0);
  opacity: 1;
}

.tooltip-icons a:nth-child(3) {
  left: -40px;
  top: 80%;
  transform: translate(-40px, 0);
}

.avatar-container:hover .tooltip-icons a:nth-child(3) {
  transform: translate(-150px, 80px);
  opacity: 1;
}

/* Right Sidebar Icons */
.tooltip-icons a:nth-child(4) {
  right: -40px;
  top: 20%;
  transform: translate(40px, 0);
}

.avatar-container:hover .tooltip-icons a:nth-child(4) {
  transform: translate(150px, -80px);
  opacity: 1;
}

.tooltip-icons a:nth-child(5) {
  right: -40px;
  top: 50%;
  transform: translate(40px, 0);
}

.avatar-container:hover .tooltip-icons a:nth-child(5) {
  transform: translate(150px, 0);
  opacity: 1;
}

.tooltip-icons a:nth-child(6) {
  right: -40px;
  top: 80%;
  transform: translate(40px, 0);
}

.avatar-container:hover .tooltip-icons a:nth-child(6) {
  transform: translate(150px, 80px);
  opacity: 1;
}

/* Pulsating Animation */
@keyframes pulse {
  0%, 100% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.2);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar -->
    <div class="avatar">
        <i class="fas fa-user"></i>
    </div>

    <!-- Flip Card Tooltip -->
    <div class="tooltip-card">
        <!-- Front Side -->
        <div class="card-side front">
            J.D.
        </div>

        <!-- Back Side -->
        <div class="card-side back">
            <div>Hello, I'm John Doe!</div>
            <div>
                <a href="https://www.linkedin.com" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>
                <a href="https://github.com" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>
                <a href="mailto:example@example.com"><i class="fas fa-envelope"></i></a>
            </div>
        </div>
    </div>
  </div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0d0d2b;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.avatar-container {
  position: relative;
  perspective: 1000px;
  cursor: pointer;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #141413, #ffacdb);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(255, 136, 0, 0.8), 0 0 40px rgba(255, 0, 85, 0.8);
  transition: all 0.3s ease;
}

.avatar i {
  font-size: 40px;
  color: white;
}

.avatar-container:hover .avatar {
  transform: scale(1.1);
  border-radius: 10%;
  background: transparent;
  border: 3px solid #ffacdb;
  box-shadow: 0 0 50px rgba(255, 136, 0, 1), 0 0 80px rgba(255, 0, 85, 1);
}

/* Flip Card Tooltip */
.tooltip-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transition: transform 01.8s ease-in-out, opacity 0.3s ease, visibility 0.3s ease, border 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.avatar-container:hover .tooltip-card {
  opacity: 1;
  visibility: visible;
  transform: rotateY(180deg);
}

/* Card Sides */
.tooltip-card .card-side {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 18px;
}

.tooltip-card .front {
  background: linear-gradient(135deg, #1e90ff, #00ff99);
}

.tooltip-card .back {
  background: linear-gradient(135deg, #b764ff, #000000);
  transform: rotateY(180deg);
  flex-direction: column;
  gap: 10px;
}

.back:hover  {
  background: #0d0d2b;
  border: 3px solid #ffacdb;
}

/* Back Side Content */
.back i {
  font-size: 24px;
  color: white;
  margin-right: 10px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.back i:hover {
  transform: scale(1.2);
  color: #00c0ff;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar -->
    <div class="avatar">
        <i class="fas fa-user"></i>
    </div>

    <!-- Tooltip Icons -->
    <div class="tooltip-icons">
        <a href="https://www.linkedin.com" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>
        <a href="https://github.com" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>
        <a href="mailto:example@example.com"><i class="fas fa-envelope"></i></a>
        <a href="#"><i class="fas fa-lightbulb"></i></a>
        <a href="#"><i class="fas fa-code"></i></a>
        <a href="#"><i class="fas fa-book"></i></a>
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f2e9e4; /* Creamy white background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.avatar-container {
  position: relative;
  cursor: pointer;
}

/* Avatar */
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9d8189, #a9b7b3);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(157, 129, 137, 0.8), 0 0 40px rgba(169, 183, 179, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar i {
  font-size: 40px;
  color: white;
}

.avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 0 50px rgba(157, 129, 137, 1), 0 0 80px rgba(169, 183, 179, 1);
}

/* Tooltip Icons */
.tooltip-icons {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
}

.avatar-container:hover .tooltip-icons {
  opacity: 1;
  visibility: visible;
  animation: radial-expand 0.6s ease-out forwards;
}

.tooltip-icons a {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #9d8189, #a9b7b3);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 20px;
  box-shadow: 0 0 15px rgba(157, 129, 137, 0.8);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.tooltip-icons a:hover {
  transform: scale(1.2);
  background: transparent;
  color: black;
  border-color: #9d8189; /* Soft border on hover */
  opacity: 0.7; /* Transparent effect */
}

/* Tooltip Icon Positions */
.tooltip-icons a:nth-child(1) {
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tooltip-icons a:nth-child(2) {
  top: 25%;
  left: 85%;
  transform: translate(-50%, -50%);
}

.tooltip-icons a:nth-child(3) {
  top: 75%;
  left: 85%;
  transform: translate(-50%, -50%);
}

.tooltip-icons a:nth-child(4) {
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tooltip-icons a:nth-child(5) {
  top: 75%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.tooltip-icons a:nth-child(6) {
  top: 25%;
  left: 15%;
  transform: translate(-50%, -50%);
}

/* Animation for Radial Expansion */
@keyframes radial-expand {
  0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0);
  }
  100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Sun (Avatar) -->
    <div class="avatar">
        <i class="fas fa-sun"></i>
    </div>

    <!-- Tooltip Icons -->
    <div class="tooltip-icons">
        <a href="https://www.linkedin.com" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>
        <a href="https://github.com" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>
        <a href="mailto:example@example.com"><i class="fas fa-envelope"></i></a>
        <a href="#"><i class="fas fa-lightbulb"></i></a>
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f3f4ed; /* Subtle cream background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Avatar (Sun) */
.avatar-container {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f4c542; /* Static golden color */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: none;
  transition: box-shadow 0.5s ease, background 0.5s ease;
}

.avatar i {
  font-size: 50px;
  color: white;
  opacity: 0.8;
}

.avatar-container:hover .avatar {
  background: radial-gradient(circle, #ffe066, #f4c542);
  box-shadow: 0 0 20px rgba(255, 224, 102, 0.7), 0 0 40px rgba(255, 224, 102, 1);
}

/* Tooltip Icons */
.tooltip-icons {
  position: absolute;
  top: 120%; /* Place below initially */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.avatar-container:hover .tooltip-icons,
.tooltip-icons:hover {
  opacity: 1;
  visibility: visible;
}

.tooltip-icons a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #d4e157; /* Pastel green-yellow */
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 24px;
  color: white;
  box-shadow: 0 0 15px rgba(212, 225, 87, 0.5);
  animation: float 3s ease-in-out infinite;
  transform: translateY(0);
  opacity: 0; /* Hidden initially */
}

/* Icons Appear One by One */
.tooltip-icons a:nth-child(1) {
  animation: appear 0.5s ease-out 0.3s forwards, float 3s ease-in-out infinite 0.6s;
}

.tooltip-icons a:nth-child(2) {
  animation: appear 0.5s ease-out 0.6s forwards, float 3s ease-in-out infinite 0.9s;
}

.tooltip-icons a:nth-child(3) {
  animation: appear 0.5s ease-out 0.9s forwards, float 3s ease-in-out infinite 1.2s;
}

.tooltip-icons a:nth-child(4) {
  animation: appear 0.5s ease-out 1.2s forwards, float 3s ease-in-out infinite 1.5s;
}

/* Appear Animation */
@keyframes appear {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Floating Animation */
@keyframes float {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-10px);
  }
}

.tooltip-icons a:hover {
  background: #42a5f5; /* Blue on hover */
  box-shadow: 0 0 20px rgba(66, 165, 245, 0.8);
  transform: scale(1.2);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar (Sun) -->
    <div class="avatar">
        <i class="fa-solid fa-bug"></i>
    </div>

    <!-- Tooltip Icons -->
    <div class="tooltip-icons">
        <a href="https://www.linkedin.com" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>
        <a href="https://github.com" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>
        <a href="mailto:example@example.com"><i class="fas fa-envelope"></i></a>
        <a href="#"><i class="fas fa-lightbulb"></i></a>
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #959593; /* Subtle cream background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

/* Avatar (Sun) */
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 13px solid #ffca28;
  box-shadow: 0 0 20px rgba(255, 202, 40, 0.7);
  transition: opacity 0.3s ease;
  position: absolute;
}

.avatar i {
  font-size: 50px;
  color: #ffca28;
  opacity: 1;
}

.avatar-container:hover .avatar {
  opacity: 0; /* Hide avatar on hover */
}

/* Tooltip Icons Container */
.tooltip-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 30px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Tooltip Icon Individual */
.tooltip-icons a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #8e24aa; /* Purple */
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 24px;
  color: white;
  box-shadow: 0 0 15px rgba(142, 36, 170, 0.6);
  transition: transform 0.3s ease, background-color 0.3s ease;
  opacity: 0;
  transform: scale(0);
}

/* Appear Animations for Icons */
.tooltip-icons a:nth-child(1) {
  animation: appearIcon 0.5s ease-out 0.1s forwards, movePath 0.5s ease-in-out 0.1s forwards;
}

.tooltip-icons a:nth-child(2) {
  animation: appearIcon 0.5s ease-out 0.3s forwards, movePath 0.5s ease-in-out 0.3s forwards;
}

.tooltip-icons a:nth-child(3) {
  animation: appearIcon 0.5s ease-out 0.5s forwards, movePath 0.5s ease-in-out 0.5s forwards;
}

.tooltip-icons a:nth-child(4) {
  animation: appearIcon 0.5s ease-out 0.7s forwards, movePath 0.5s ease-in-out 0.7s forwards;
}

/* Reverse Animations for Mouse Leave */
.tooltip-icons.hide a:nth-child(1) {
  animation: disappearIcon 0.5s ease-in 0s forwards, movePathReverse 0.5s ease-in-out 0s forwards;
}

.tooltip-icons.hide a:nth-child(2) {
  animation: disappearIcon 0.5s ease-in 0.2s forwards, movePathReverse 0.5s ease-in-out 0.2s forwards;
}

.tooltip-icons.hide a:nth-child(3) {
  animation: disappearIcon 0.5s ease-in 0.4s forwards, movePathReverse 0.5s ease-in-out 0.4s forwards;
}

.tooltip-icons.hide a:nth-child(4) {
  animation: disappearIcon 0.5s ease-in 0.6s forwards, movePathReverse 0.5s ease-in-out 0.6s forwards;
}

/* Appear Icon Animation */
@keyframes appearIcon {
  0% {
      opacity: 0;
      transform: scale(0);
  }
  100% {
      opacity: 1;
      transform: scale(1);
  }
}

/* Disappear Icon Animation (Reverse) */
@keyframes disappearIcon {
  0% {
      opacity: 1;
      transform: scale(1);
  }
  100% {
      opacity: 0;
      transform: scale(0);
  }
}

/* Path Animation */
@keyframes movePath {
  0% {
      transform: translate(0, 0);
  }
  50% {
      transform: translate(0, -50px);
  }
  100% {
      transform: translate(0, 0);
  }
}

/* Reverse Path Animation */
@keyframes movePathReverse {
  0% {
      transform: translate(0, -50px);
  }
  50% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(0, 50px);
  }
}

.tooltip-icons a:hover {
  background-color: #ff4081;
  transform: scale(1.2);
}

function initializeTooltip() {

  const avatarContainer = document.querySelector('.avatar-container');
  const tooltipIcons = document.querySelector('.tooltip-icons');

  avatarContainer.addEventListener('mouseenter', () => {
      tooltipIcons.style.opacity = 1;
      tooltipIcons.style.visibility = 'visible';
      tooltipIcons.classList.remove('hide'); // Remove the hide class
  });

  avatarContainer.addEventListener('mouseleave', () => {
      tooltipIcons.classList.add('hide'); // Add the hide class
  });
  }

  // Call the function to initialize the toggle
  initializeTooltip();

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar (User Icon) -->
    <div class="avatar">
        <i class="fas fa-user"></i> <!-- Changed to user icon -->
    </div>

    <!-- Tooltip Content -->
    <div class="tooltip">
        <div class="message">Active Developer</div> <!-- Message shown on hover -->
    </div>
  </div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #000000; /* Subtle background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

/* Avatar (User Icon) */
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000; /* Yellow background */
  box-shadow: 0 0 20px rgba(255, 202, 40, 0.7);
  border: 3px solid #d4e157;
  transition: transform 0.3s ease, background-color 0.3s ease;
  position: absolute;
}

.avatar i {
  font-size: 40px;
  color: white;
}

/* Tooltip Expansion */
.tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 10%;
  background: linear-gradient(45deg, #000000, #414140); /* Gradient color */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
}

.avatar-container:hover .tooltip {
  width: 300px; /* Expanded size */
  height: 300px; /* Expanded size */
  opacity: 1;
  visibility: visible;
}

/* Tooltip Content */
.tooltip .message {
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-align: center;
  z-index: 10;
}

/* Gradient Color Shift */
.tooltip:hover {
  border: 3px solid #d4e157;
  background: linear-gradient(45deg, #000000, #1f282f); /* Hover gradient */
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar (User Icon) -->
    <div class="avatar">
        <i class="fas fa-user-alt"></i> <!-- Changed to user-alt icon -->
    </div>

    <!-- Tooltip Content Box -->
    <div class="tooltip">
        <div class="message">Web Developer</div> <!-- New text message -->
    </div>
  </div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #2c2c2c; /* Dark background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

/* Avatar (User Icon) */
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #008080; /* Teal background */
  box-shadow: 0 0 20px rgba(0, 128, 128, 0.7);
  border: 4px solid #f4f0ef;
  transition: transform 0.3s ease, background-color 0.3s ease;
  position: absolute;
}

.avatar i {
  font-size: 40px;
  color: white;
}

/* Tooltip Box Appearing Above Avatar */
.tooltip {
  position: absolute;
  bottom: 100%; /* Positioned above the avatar */
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 60px;
  background: #2196F3; /* Blue background */
  color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px); /* Slight offset to start */
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.avatar-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-10px); /* Smooth rise animation */
}

/* Tooltip Message */
.tooltip .message {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  z-index: 10;
}

/* Avatar Hover Effect */
.avatar-container:hover .avatar {
  background: #3b413c; /* Green background */
  transform: scale(1.1); /* Slight scale effect */
}

/* Avatar Shadow on Hover */
.avatar-container:hover .avatar {
  box-shadow: 0 0 30px rgba(76, 175, 80, 0.7);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar (User Icon) -->
    <div class="avatar">
        <i class="fas fa-robot"></i> <!-- A futuristic robot icon -->
    </div>

    <!-- Neon Pulse Circle -->
    <div class="pulse-circle"></div>

    <!-- Tooltip Message -->
    <div class="tooltip-message">
        Let's Connect!
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #111; /* Dark background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Avatar (User Icon) */
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333; /* Dark background for avatar */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: absolute;
  z-index: 2;
}

.avatar i {
  font-size: 40px;
  color: #f5f5f5;
}

/* Neon Pulse Circle */
.pulse-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid #00ff00; /* Neon Green */
  opacity: 0;
  animation: pulseAnimation 2s infinite; /* Pulse animation */
  pointer-events: none; /* Disable hover interaction with the circle */
}

/* Pulse Animation */
@keyframes pulseAnimation {
  0% {
      opacity: 0.3;
      transform: translate(-50%, -50%) scale(1);
      border-color: #00ff00; /* Neon Green */
  }
  50% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.2);
      border-color: #ff00ff; /* Neon Pink */
  }
  100% {
      opacity: 0.3;
      transform: translate(-50%, -50%) scale(1);
      border-color: #00ff00; /* Neon Green */
  }
}

/* Avatar Hover Effects */
.avatar-container:hover .avatar {
  transform: scale(1.1); /* Slightly enlarge avatar */
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.7); /* Green glowing shadow */
}

/* Tooltip Message */
.tooltip-message {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: white;
  text-align: center;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-container:hover .tooltip-message {
  opacity: 1;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar (User Icon) -->
    <div class="avatar">
        <i class="fas fa-comment-dots"></i> <!-- Chat Icon -->
    </div>

    <!-- Tooltip Message -->
    <div class="tooltip-message">
        Let's Chat!
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #222; /* Dark background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease-in-out;
}

/* Avatar (Initial Circle) */
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #4caf50; /* Green */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
  position: absolute;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.avatar i {
  font-size: 40px;
  color: white;
}

/* Tooltip Message */
.tooltip-message {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: white;
  text-align: center;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Shape Transformation on Hover */
.avatar-container:hover .avatar {
  border-radius: 15%; /* Changes the shape */
  background: linear-gradient(45deg, #4caf50, #0e0b0a); /* Green to Orange Gradient */
  transform: scale(1.1) rotate(15deg); /* Scaling and rotation effect */
}

/* Tooltip Fade-in Effect */
.avatar-container:hover .tooltip-message {
  opacity: 1;
}

/* Hover Effect on Avatar */
.avatar-container:hover {
  transform: scale(1.1); /* Slightly enlarge avatar */
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar -->
    <div class="avatar">
        <i class="fas fa-user"></i> <!-- Avatar icon -->
    </div>

    <!-- Tooltip Message -->
    <div class="tooltip">
        "Click Me!"
    </div>
  </div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #282828; /* Dark background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

/* Avatar (Circle) */
.avatar {
  width: 100%;
  height: 100%;
  border: 10px double white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(26, 188, 156, 0.7);
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.avatar i {
  font-size: 40px;
  color: white;
}

/* Tooltip (Message) */
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #000000; /* Blue */
  color: white;
  padding: 12px 25px;
  border-radius: 10px;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-out;
  transform-origin: bottom;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.7);
  z-index: 5;
}

/* Tooltip active state */
.avatar-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-15px) scale(1.1);
  animation: tooltipBounce 0.5s ease-out forwards;
}

/* Tooltip Bounce Animation */
@keyframes tooltipBounce {
  0% {
      transform: translateX(-50%) translateY(10px) scale(0.9);
  }
  50% {
      transform: translateX(-50%) translateY(-15px) scale(1.2);
  }
  100% {
      transform: translateX(-50%) translateY(-10px) scale(1);
  }
}

/* Avatar Hover Effect */
.avatar-container:hover .avatar {
  transform: scale(1.2) rotate(10deg); /* Avatar zoom and rotate */
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar (User Icon) -->
    <div class="avatar">
        <i class="fas fa-user"></i> <!-- User Icon -->
    </div>

    <!-- Tooltip Message -->
    <div class="tooltip">
        "Hey, Let's Connect!"
    </div>
  </div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #1e1e1e; /* Dark background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease-in-out;
  z-index: 10;
}

/* Avatar (Circle) */
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f31295; /* Yellow */
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  box-shadow: 0 0 15px rgba(243, 156, 18, 0.7);
  transition: all 0.3s ease-in-out;
}

.avatar i {
  font-size: 40px;
  color: white;
}

/* Tooltip (Message) */
.tooltip {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateX(10px) translateY(-50%);
  background-color: #131514; /* Green */
  color: white;
  border-left: 13px solid #f31295; /* Yellow */
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  z-index: 5;
}

/* Tooltip appears on hover */
.avatar-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* Tooltip follows cursor (magnetic effect) */
.tooltip.following {
  transition: transform 0.15s ease-out;
}

function initializeTooltip() {

const avatarContainer = document.querySelector('.avatar-container');
const tooltip = document.querySelector('.tooltip');

// Follow mouse with "lag" effect
document.addEventListener('mousemove', (e) => {
    let mouseX = e.clientX;
    let mouseY = e.clientY;

    // Apply "magnetic" effect
    let distX = mouseX - tooltip.getBoundingClientRect().left;
    let distY = mouseY - tooltip.getBoundingClientRect().top;

    tooltip.style.transform = `translate(${distX / 10}px, ${distY / 10}px)`; // Gradual move

    // Add "following" class when hovering
    tooltip.classList.add('following');
});

// Tooltip becomes visible when avatar is hovered
avatarContainer.addEventListener('mouseenter', () => {
    tooltip.style.opacity = 1;
    tooltip.style.visibility = 'visible';
});

// Tooltip disappears when mouse leaves the avatar
avatarContainer.addEventListener('mouseleave', () => {
    tooltip.style.opacity = 0;
    tooltip.style.visibility = 'hidden';
});

}

// Call the function to initialize the toggle
initializeTooltip();

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar -->
    <div class="avatar">
        <i class="fas fa-user"></i>
    </div>

    <!-- Tooltip -->
    <div class="tooltip">
        <!-- Top Section: Small Avatar -->
        <div class="top-section">
            <img decoding="async" src="https://images.nightcafe.studio/jobs/XCI50bkYYVCGadsCMfzq/XCI50bkYYVCGadsCMfzq--0--o6zac.jpg?tr=w-1600,c-at_max" alt="Avatar">
        </div>

        <!-- Middle Section: Details -->
        <div class="middle-section">
            <div><strong>John Doe</strong></div>
            <div>Web Developer</div>
        </div>

        <!-- Bottom Section: Social Media Icons -->
        <div class="bottom-section">
            <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
            <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
            <a href="#" target="_blank"><i class="fab fa-github"></i></a>
        </div>
    </div>
  </div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #1e1e1e; /* Dark background */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  top: -30%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Avatar (Circle) */
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 10%;
  background: #ffffff; /* Blue */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 15px rgba(52, 152, 219, 0.7);
  transition: all 0.3s ease-in-out;
}

.avatar i {
  font-size: 40px;
  color: black;
  transition: all 0.3s ease-in-out;
}

.avatar:hover i {
  transform: scale(1.5);
  color: #61ffef;
}

/* Tooltip (Vertical Expansion) */
.tooltip {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 200px;
  height: 0;
  background: #2c3e50; /* Dark Gray */
  color: white;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tooltip:hover{
  border: 1px solid #61ffef;
}

/* Tooltip Content */
.tooltip .top-section {
  background: #34495e; /* Lighter Gray */
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltip .top-section img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.tooltip .middle-section {
  padding: 10px;
  text-align: center;
  font-size: 16px;
}

.tooltip .bottom-section {
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.tooltip .bottom-section a {
  color: white;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.tooltip .bottom-section a:hover {
  color: #1abc9c; /* Green */
}

/* Tooltip Expands on Hover */
.avatar-container:hover .tooltip {
  height: 250px; /* Fully expanded height */
  opacity: 1;
  visibility: visible;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <!-- Avatar -->
    <div class="avatar">
        <i class="fas fa-user"></i>
    </div>

    <!-- Tooltip -->
    <div class="tooltip">
        <!-- Center Text -->
        <div class="center-text">Let's Connect!</div>

        <!-- Radial Icons -->
        <div class="icon"><i class="fas fa-envelope"></i></div> <!-- Envelope is now properly positioned -->
        <div class="icon"><i class="fab fa-twitter"></i></div>
        <div class="icon"><i class="fab fa-github"></i></div>
        <div class="icon linkedin"><i class="fab fa-linkedin"></i></div>
    </div>
  </div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #2b2b2b; /* Dark background for contrast */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Avatar */
.avatar {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.avatar-container:hover .avatar{
  opacity: 0;
}

.avatar i {
  font-size: 40px;
  color: white;
}

/* Tooltip (Circular Radial) */
.tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-out;
  z-index: 10;
}

.avatar-container:hover .tooltip {
  width: 250px;
  height: 250px;
  opacity: 1;
  visibility: visible;
}

/* Tooltip Inner Content */
.tooltip .center-text {
  position: absolute;
  font-size: 18px;
  color: white;
  text-align: center;
  animation: fadeIn 0.4s ease;
}

.tooltip .icon {
  position: absolute;
  font-size: 20px;
  color: white;
  background: #34495e; /* Dark background for icons */
  border-radius: 10%;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.icon i{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.tooltip .icon:hover {
  background: #1abc9c; /* Green on hover */
  border: 5px solid #ffffff;
  border-radius: 50%;
}

/* Tooltip Icon Positions */
.tooltip .icon:nth-child(1) {
  top: 15%; /* Envelope moved to the top */
  left: 50%;
  transform: translate(-50%, -50%);
}

.tooltip .linkedin{
  top: 15%; /* Envelope moved to the top */
  left: 50%;
  transform: translate(-50%, -50%);
}

.tooltip .icon:nth-child(2) {
  top: 50%;
  left: 85%; /* Twitter to the right */
  transform: translate(-50%, -50%);
}

.tooltip .icon:nth-child(3) {
  bottom: 15%; /* GitHub to the bottom */
  left: 50%;
  transform: translate(-50%, 50%);
}

.tooltip .icon:nth-child(4) {
  top: 50%;
  left: 15%; /* LinkedIn to the left */
  transform: translate(-50%, -50%);
}

/* Keyframes for Fading In */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <div class="avatar">
        <i class="fas fa-user"></i>
    </div>

    <div class="tooltip">
        <div class="icon"><i class="fas fa-envelope"></i></div>
        <div class="icon"><i class="fab fa-twitter"></i></div>
        <div class="icon"><i class="fab fa-github"></i></div>
        <div class="icon"><i class="fab fa-facebook"></i></div>
        <div class="icon"><i class="fab fa-linkedin"></i></div>
        <div class="icon"><i class="fab fa-whatsapp"></i></div>
        <div class="icon"><i class="fab fa-instagram"></i></div>
        <div class="icon"><i class="fab fa-reddit"></i></div>
    </div>
</div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #1b1b1b;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 100%;
  height: 100%;
  margin-top: 3rem;
  margin-left: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;transition: opacity 0.3s ease;
}

.avatar i {
  font-size: 40px;
  color: white;
}

.avatar-container:hover .avatar i{
  color: #2ecc71;
}

/* Tooltip Circle */
.tooltip {
  position: absolute;
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}

.avatar-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

.icon {
  position: absolute;
  font-size: 20px;
  color: white;
  background: #2ecc71;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
  transition: transform 0.4s ease-out, opacity 0.4s ease-out, background 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.icon i{
  transition: all 0.2s ease;
}

.avatar-container:hover .icon {
  transform: scale(1);
  opacity: 1;
}

.avatar-container:not(:hover) .icon {
  transform: scale(0);
  opacity: 0;
}

/* Positioning Icons in a Circle */
.tooltip .icon:nth-child(1) { top: 10%; left: 50%; transform: translate(-50%, -50%); }
.tooltip .icon:nth-child(2) { top: 25%; left: 80%; transform: translate(-50%, -50%); }
.tooltip .icon:nth-child(3) { top: 50%; left: 90%; transform: translate(-50%, -50%); }
.tooltip .icon:nth-child(4) { top: 75%; left: 80%; transform: translate(-50%, -50%); }
.tooltip .icon:nth-child(5) { top: 90%; left: 50%; transform: translate(-50%, -50%); }
.tooltip .icon:nth-child(6) { top: 75%; left: 20%; transform: translate(-50%, -50%); }
.tooltip .icon:nth-child(7) { top: 50%; left: 10%; transform: translate(-50%, -50%); }
.tooltip .icon:nth-child(8) { top: 25%; left: 20%; transform: translate(-50%, -50%); }

/* Brand Colors on Hover */
.icon:hover i { transform: scale(1.4); }
.icon:nth-child(1):hover { background: #EA4335; } /* Gmail Red */
.icon:nth-child(2):hover { background: #1DA1F2; } /* Twitter Blue */
.icon:nth-child(3):hover { background: #333; } /* GitHub Dark */
.icon:nth-child(4):hover { background: #1877F2; } /* Facebook Blue */
.icon:nth-child(5):hover { background: #0077B5; } /* LinkedIn Blue */
.icon:nth-child(6):hover { background: #05c24a; } /* WhatsApp Green */
.icon:nth-child(7):hover { background: #E1306C; } /* Instagram Pink */
.icon:nth-child(8):hover { background: #FF4500; } /* Reddit Orange */

/* Expanding Animation */
@keyframes waveExpand {
  from {
      transform: scale(0);
      opacity: 0;
  }
  to {
      transform: scale(1);
      opacity: 1;
  }
}

.avatar-container:hover .icon {
  animation: waveExpand 0.4s ease-out forwards;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <ul class="neon-icons">
    <li class="icon-content">
      <a href="#" class="linkedin">
        <i class="fa-brands fa-linkedin"></i>
        <span class="tooltip">LinkedIn</span>
      </a>
    </li>
    <li class="icon-content">
      <a href="#" class="github">
        <i class="fa-brands fa-github"></i>
        <span class="tooltip" style="color: black;">GitHub</span>
      </a>
    </li>
    <li class="icon-content">
      <a href="#" class="instagram">
        <i class="fa-brands fa-instagram"></i>
        <span class="tooltip">Instagram</span>
      </a>
    </li>
    <li class="icon-content">
      <a href="#" class="youtube">
        <i class="fa-brands fa-youtube"></i>
        <span class="tooltip">YouTube</span>
      </a>
    </li>
  </ul>

body {
  background: #111;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* UL Styling */
.neon-icons {
  display: flex;
  gap: 20px;
  list-style: none;
}

/* Icon Container */
.neon-icons .icon-content {
  position: relative;
}

/* Icon Links */
.neon-icons .icon-content a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: #222;
  border-radius: 50%;
  text-decoration: none;
  font-size: 30px;
  color: #fff;
  transition: 0.3s;
  box-shadow: 0 0 5px #fff, 0 0 10px #000;
}

/* Hover Effect */
.neon-icons .icon-content a:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px var(--neon), 0 0 20px var(--neon), 0 0 40px var(--neon);
}

/* Neon Colors */
.linkedin { --neon: #0077b5; }
.github { --neon: #ffffff; }
.instagram { --neon: #e1306c; }
.youtube { --neon: #ff0000; }

.neon-icons .icon-content a.linkedin:hover { background: #0077b5; }
.neon-icons .icon-content a.github:hover { background: #ffffff; color: #000; }
.neon-icons .icon-content a.instagram:hover { background: #e1306c; }
.neon-icons .icon-content a.youtube:hover { background: #ff0000; }

/* Tooltip Styling */
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--neon);
  color: #fff;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  white-space: nowrap;
  box-shadow: 0 0 10px var(--neon);
}

/* Tooltip Arrow */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--neon);
}

/* Show Tooltip on Hover */
.icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-15px);
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <div class="avatar-container">
    <div class="avatar">
        <i class="fas fa-user"></i>
    </div>

    <div class="tooltip">
        <div class="icon envelope"><i class="fas fa-envelope"></i></div>
        <div class="icon twitter"><i class="fab fa-twitter"></i></div>
        <div class="icon github"><i class="fab fa-github"></i></div>
        <div class="icon facebook"><i class="fab fa-facebook"></i></div>
        <div class="icon linkedin"><i class="fab fa-linkedin"></i></div>
        <div class="icon phone"><i class="fas fa-phone"></i></div>
        <div class="icon location"><i class="fas fa-map-marker-alt"></i></div>
        <div class="icon website"><i class="fas fa-globe"></i></div>
    </div>
  </div>

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #2b2b2b;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 10%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #de4e00;
  box-shadow: 0 0 20px rgba(222, 78, 0, 0.7);
  transition: opacity 0.3s ease;
}

.avatar i {
  font-size: 40px;
  color: white;
}

.avatar-container:hover .avatar {
  opacity: 0;
}

/* Tooltip Cube */
.tooltip {
  position: absolute;
  width: 250px;
  height: 250px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.avatar-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

.icon {
  font-size: 20px;
  color: white;
  background: #000000;
  border-radius: 50%;
  border: 2px solid #de4e00;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease-out;
  transform: scale(0);
  animation: fadeIn 0.5s ease-out forwards;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.envelope:hover { background: #de4e00; }
.twitter:hover { background: #1da1f2; }
.instagram:hover { background: #e4405f; }
.facebook:hover { background: #3b5998; }
.linkedin:hover { background: #0e76a8; }
.phone:hover { background: #e10000; }
.location:hover { background: #249303; }
.website:hover { background: #ff218c; }
.github:hover { background: #282727; }

.avatar-container:hover .icon {
  animation: fadeIn 0.5s ease-out forwards;
}

.avatar-container:not(:hover) .icon {
  animation: fadeOut 0s ease-in forwards;
}

/* Icon Positions (Cube Borders) */
.tooltip .icon:nth-child(1) { grid-area: 1 / 1; animation-delay: 0.1s; }
.tooltip .icon:nth-child(2) { grid-area: 1 / 2; animation-delay: 0.2s; }
.tooltip .icon:nth-child(3) { grid-area: 1 / 3; animation-delay: 0.3s; }
.tooltip .icon:nth-child(4) { grid-area: 2 / 1; animation-delay: 0.4s; }
.tooltip .icon:nth-child(5) { grid-area: 2 / 3; animation-delay: 0.5s; }
.tooltip .icon:nth-child(6) { grid-area: 3 / 1; animation-delay: 0.6s; }
.tooltip .icon:nth-child(7) { grid-area: 3 / 2; animation-delay: 0.7s; }
.tooltip .icon:nth-child(8) { grid-area: 3 / 3; animation-delay: 0.8s; }

/* Appear Animation */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: scale(0);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}

/* Disappear Animation */
@keyframes fadeOut {
  from {
      opacity: 1;
      transform: scale(1);
  }
  to {
      opacity: 0;
      transform: scale(0);
  }
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <div class="tooltip-container">
    <button class="tooltip-button">Hover Me</button>
    <span class="tooltip-text">This is a tooltip!</span>
</div>

body {
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f9;
}

/* Tooltip Container */
.tooltip-container {
  position: relative;
  display: inline-block;
  margin: 20px;
}

/* Tooltip Text */
.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position above the element */
  left: 50%;
  margin-left: -60px; /* Center the tooltip */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
  font-size: 14px;
}

/* Tooltip Arrow */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Hover Effect */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Button Style */
.tooltip-button {
  background-color: #7600a4;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.tooltip-button:hover {
  background-color: #b300a1;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
  <div class="neon-container">
    <div class="avatar">
      <i class="fa-regular fa-bell"></i>
    </div>
    <ul class="neon-icons">
      <li class="icon-content">
        <a href="#" class="icon" data-social="twitter">
          <i class="fab fa-twitter"></i>
        </a>
        <div class="tooltip">Twitter<span class="arrow"></span></div>
      </li>
      <li class="icon-content">
        <a href="#" class="icon" data-social="discord">
          <i class="fab fa-discord"></i>
        </a>
        <div class="tooltip">Discord<span class="arrow"></span></div>
      </li>
      <li class="icon-content">
        <a href="#" class="icon" data-social="reddit">
          <i class="fab fa-reddit"></i>
        </a>
        <div class="tooltip">Reddit<span class="arrow"></span></div>
      </li>
      <li class="icon-content">
        <a href="#" class="icon" data-social="twitch">
          <i class="fab fa-twitch"></i>
        </a>
        <div class="tooltip">Twitch<span class="arrow"></span></div>
      </li>
    </ul>
  </div>

body {
  background-color: #0a0a0a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* Container for Avatar and Icons */
.neon-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Avatar Styling */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #000000, #151616);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Avatar Hover Effect */
.neon-container:hover .avatar {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
}

/* Avatar Icon */
.avatar i {
  font-size: 36px;
  color: white;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.neon-container:hover .avatar i {
  color: #1df2e0;
  transform: scale(1.2) rotate(5deg);
  }

/* Social Icons Layout */
.neon-icons {
  list-style: none;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 150px;
  height: 150px;
  opacity: 0;
  animation: spin 1s linear both;
  animation-play-state: paused; /* Default state: paused */
}

/* Start animation only when hovering over the avatar */
.neon-container:hover .neon-icons {
  opacity: 1;
  animation-play-state: running; /* Animation starts */
}

/* Rotation Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Hide icons only when mouse leaves the entire container */
.neon-container:not(:hover) .neon-icons {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}




/* Icon Positioning */
.icon-content {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Positioning Icons Around Avatar */
.icon-content:nth-child(1) { top: -80px; left: 50%; transform: translateX(-50%); }
.icon-content:nth-child(2) { top: 50%; left: -80px; transform: translateY(-50%); }
.icon-content:nth-child(3) { top: 50%; right: -80px; transform: translateY(-50%); }
.icon-content:nth-child(4) { bottom: -80px; left: 50%; transform: translateX(-50%); }

/* Icon Styling */
.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 24px;
  transition: 0.3s ease-in-out;
  position: relative;
  text-decoration: none;
}

/* Neon Hover Effects */
.icon[data-social="twitter"]:hover {
  box-shadow: 0 0 15px #1da1f2;
  color: #1da1f2;
}

.icon[data-social="discord"]:hover {
  box-shadow: 0 0 15px #5865f2;
  color: #5865f2;
}

.icon[data-social="reddit"]:hover {
  box-shadow: 0 0 15px #ff4500;
  color: #ff4500;
}

.icon[data-social="twitch"]:hover {
  box-shadow: 0 0 15px #9146ff;
  color: #9146ff;
}

/* Tooltip Styling */
.tooltip {
  position: absolute;
  bottom: 70px;
  background-color: #222;
  color: white;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in-out;
}

/* Tooltip Arrow */
.tooltip .arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #222;
}

/* Show Tooltip on Icon Hover */
.icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* Hide Icons when Mouse Leaves the Container */
.neon-container:not(:hover) .neon-icons {
  opacity: 0;
  transform: rotate(0deg); /* Reset rotation */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
  <div class="holo-container">
    <div class="avatar">
      <i class="fas fa-user"></i>
    </div>
    <ul class="holo-icons">
      <li class="icon-content">
        <a href="#" class="icon linkedin" data-social="linkedin">
          <i class="fab fa-linkedin"></i>
        </a>
      </li>
      <li class="icon-content">
        <a href="#" class="icon github" data-social="github">
          <i class="fab fa-github"></i>
        </a>
      </li>
      <li class="icon-content">
        <a href="#" class="icon youtube" data-social="youtube">
          <i class="fab fa-youtube"></i>
        </a>
      </li>
      <li class="icon-content">
        <a href="#" class="icon instagram" data-social="instagram">
          <i class="fab fa-instagram"></i>
        </a>
      </li>
      <li class="icon-content">
        <a href="#" class="icon twitter" data-social="twitter">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
      <li class="icon-content">
        <a href="#" class="icon facebook" data-social="facebook">
          <i class="fab fa-facebook"></i>
        </a>
      </li>
      <li class="icon-content">
        <a href="#" class="icon medium" data-social="medium">
          <i class="fab fa-medium"></i>
        </a>
      </li>
      <li class="icon-content">
        <a href="#" class="icon discord" data-social="discord">
          <i class="fab fa-discord"></i>
        </a>
      </li>
      <li class="icon-content">
        <a href="#" class="icon telegram" data-social="telegram">
          <i class="fab fa-telegram"></i>
        </a>
      </li>
    </ul>
  </div>

body {
  background-color: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.holo-container {
  position: relative;
  top: -20%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 5px solid #1cffd2;
  position: relative;
  transition: transform 0.3s ease-in-out, border-bottom 0.3s ease-in-out, border-right 0.6s ease-in-out, border-top 0.9s ease-in-out;
}

.holo-container:hover .avatar {
  transform: scale(1.1);
  border-bottom: 5px solid #1cffd2;
  border-right: 5px solid #1cffd2;
  border-top: 5px solid #1cffd2;
}

.avatar i {
  font-size: 36px;
  color: white;
}

.holo-icons {
  list-style: none;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 120px;
  top: 100px;
  border-left: 10px solid #1cffd2;
  margin-left: -40px;
  opacity: 0;
  transform: perspective(500px) rotateX(40deg);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.holo-container:hover .holo-icons {
  opacity: 1;
  transform: perspective(500px) rotateX(0deg);
}

.icon-content {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 24px;
  margin-left: -40px;
  transition: 0.3s ease-in-out;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.icon:hover {
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  transform: scale(1.1);
}

.linkedin:hover {
  background-color: #0077b5;
}

.github:hover {
  background-color: #000000;
}

.youtube:hover {
  background-color: #ff0000;
}


.instagram:hover {
  background-color: #e4405f;
}

.twitter:hover {
  background-color: #1da1f2;
}

.facebook:hover {
  background-color: #3b5998;
}
.medium:hover {
  background-color: #00ab65;
}

.discord:hover {
  background-color: #7289da;
}

.telegram:hover {
  background-color: #0088cc;
}

<!-- No JS code needed for this element -->

51 Tooltips

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code