Yüzen İkon Tooltip

<div class="tooltip-container">
  <div class="icon-wrapper">
    <div class="tooltip">Twitter</div>
    <div class="icon"><i class="fab fa-twitter"></i></div>
  </div>
</div>

.tooltip-container { display: flex; transform: translateY(20px); font-family: 'Inter', sans-serif; }
.icon-wrapper { position: relative; margin: 0 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.icon { position: relative; background: #fff; color: #1a1a24; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 10px 10px rgba(0,0,0,0.1); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.tooltip { position: absolute; top: 0; background: #fff; color: #1a1a24; padding: 5px 10px; font-size: 14px; font-weight: bold; border-radius: 20px; opacity: 0; pointer-events: none; box-shadow: 0 10px 10px rgba(0,0,0,0.1); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.tooltip::before { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #fff; }
.icon-wrapper:hover .tooltip { top: -45px; opacity: 1; pointer-events: auto; }
.icon-wrapper:hover .icon { background: #1DA1F2; color: #fff; }