<div class="user-tooltip" role="tooltip">
  <div class="preview-user">
    <div class="preview-user-content">
      <div class="preview-user-avatar user-rating-1">
        <img class="avatar" src="./../../assets/images/placeholder-user-avatar-3.jpg" alt="User avatar">
      </div> 

      <div class="preview-user-text">
        <strong class="preview-user-name">
          Username
        </strong> 

        <span class="preview-user-details">
          Organization · City, Country
        </span>
      </div>
    </div>
  </div>

  <div class="user-tooltip-details">
    <div class="user-tooltip-achievements">
      <h4 class="user-title-secondary">
        Achievements
      </h4>

      <div class="user-tooltip-achievements-content">
        <div class="badge-achievement-gold">
          <span class="badge-achievement-dot"></span>
          3
        </div>  

        <div class="badge-achievement-silver">
          <span class="badge-achievement-dot"></span>
          5
        </div> 

        <div class="badge-achievement-bronze">
          <span class="badge-achievement-dot"></span>
          1
        </div> 
      </div>
    </div> 

    <div class="user-tooltip-rating">
      <h4 class="user-title-secondary">
        Rating
      </h4>

      <div class="user-rating-content">
        <strong>143</strong> ± 0
      </div>
    </div> 

    <div class="user-tooltip-ranking">
      <h4 class="user-title-secondary">
        Ranking
      </h4>

      <div class="user-ranking-content">
        #139
      </div>
    </div> 
  </div>
</div>