<p style="text-align: center;">наведите на квадрат</p>
<div class="wrapper">
<div class="tooltip-team person-3" data-tippy-content="учусь новому 💪"></div>
      <div class="tooltip-team person-4" data-tippy-content="расскажу-покажу 🎸"></div>
      <div class="tooltip-team person-5" data-tippy-content="навёрстываю упущенное"></div>
      <div class="tooltip-team person-6" data-tippy-content="World's BEST BOSS 👑"></div>
      <div class="tooltip-team person-7" data-tippy-content="помогаю понимать 👑"></div>
</div>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

.tippy-box[data-theme~='emx'] {
  padding: 1em 1.3em;
  font-size: 14px;
  white-space: normal;
  background-color: #303030;
  color: #fff;
  font-family: var(--font-family);
  border-radius: 0;
}

.tippy-content p:last-child {
  margin-bottom: 0;
}

.tippy-content {
  padding: 0;
  text-align: center;
}

.tooltip-content__item > p:last-of-type {
  margin-bottom: 0;
}

.dark-theme .tippy-box {
  background-color: #fff;
  color: #303030;
}

.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
  content: "";
  position: absolute;
  top: -12px;
  border: 8px solid transparent;
  border-bottom: 8px solid #303030;
  border-left: 8px solid #303030;
}

.tippy-box[data-placement^=top]>.tippy-arrow:before {
  content: "";
  position: absolute;
  bottom: -12px;
  border: 8px solid transparent;
  border-top: 8px solid #303030;
  border-right: 8px solid #303030;
}

.tooltip-team {
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  opacity: .5;
  border-radius: 10px;
}

.wrapper {
  display: flex;
  gap: 10px;
  justify-content: center;
}

tippy('[data-tippy-content]', {
  theme: 'emx',
  hideOnClick: false,
  maxWidth: 468,
  placement: 'bottom',
});