Social tooltip

These social icons have a tooltip function compared with basic buttons and have effect on hover.

In order to achieve them you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the buttons to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. So for oxygen I used a code-element to build-up the buttons however I tried to cover the case Font Awesome is not loaded into your builder. For Bricks builder, please follow the HTML structure so you can add-up divs instead and add icon block (therefore Font Awesome) instead of the <i> tag.

I will start with the mandatory library to be loaded, Font Awesome in this case (in the head).

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied, the font is not defined, the container div doesn’t have any background color and the <a> tag is not “unset”.

Load Font Awesome library if necessary, please adapt according to your builder:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

HTML:

<div class="si-section">
  <a href="#" class="icon-tp fb-1" aria-label="facebook">
    <p class="tooltip">Facebook</p>
    <i class="so-icon fa-brands fa-facebook-f"></i>
  </a>
  <a href="#" class="icon-tp twitter-1" aria-label="twitter">
    <p class="tooltip">Twitter</p>
    <i class="so-icon fa-brands fa-twitter"></i>
  </a>
  <a href="#" class="icon-tp insta-1" aria-label="instagram">
    <p class="tooltip">Instagram</p>
    <i class="so-icon fa-brands fa-instagram"></i>
  </a>
  <a href="#" class="icon-tp pint-1" aria-label="pinterest">
    <p class="tooltip">Pinterest</p>
    <i class="so-icon fa-brands fa-pinterest"></i>
  </a>
  <a href="#" class="icon-tp youtube-1" aria-label="youtube">
    <p class="tooltip">Youtube</p>
    <i class="so-icon fa-brands fa-youtube-square"></i>
  </a>
</div>

CSS:

.si-section {
  padding: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #202020;
  justify-content: center;
  min-height: 75vh;
  width: 100%;
}
.icon-tp {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 20px;
  width: 75px;
  height: 75px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0, 1.4, 0.88, 1);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 80px;
  height: 25px;
  font-size: 0.8rem;
  border-radius: 10px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0, 1.4, 0.88, 1);
}
.so-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 2.5rem;
  width: 100%;
  height: 100%;
}
.tooltip::before {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  left: 50%;
  bottom: -12px;
  z-index: -1;
  transform-origin: center;
  clip-path: polygon(100% 0, 1% 0, 50% 100%);
  transform: translateX(-50%);
  transition: all 0.3s cubic-bezier(0, 1.4, 0.88, 1);
}
.icon-tp:hover .tooltip {
  display: flex;
  opacity: 1;
  align-items: center;
  transform: translateY(-35px);
  transition: all 0.3s cubic-bezier(0, 1.4, 0.88, 1);
}
.icon-tp:active {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -10px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  transform: translateY(1.5px);
}
.icon-tp:hover .so-icon {
  color: white;
}
.fb-1:hover,
.fb-1:hover .tooltip,
.fb-1:hover .icon-tp,
.fb-1:hover .tooltip:before {
  align-items: center;
  background-color: #3b5999;
  color: white;
  transition: all 0.3s cubic-bezier(0, 1.4, 0.88, 1);
}
.twitter-1:hover,
.twitter-1:hover .tooltip,
.twitter-1:hover .tooltip:before,
.twitter-1:hover .icon-tp {
  align-items: center;
  background-color: #46c1f6;
  color: white;
  transition: all 0.3s cubic-bezier(0, 1.4, 0.88, 1);
}
.insta-1:hover,
.insta-1:hover .tooltip,
.insta-1:hover .tooltip:before,
.insta-1:hover .icon-tp {
  align-items: center;
  background-color: #e1306c;
  color: white;
  transition: all 0.3s cubic-bezier(0, 1.4, 0.88, 1);
}
.pint-1:hover,
.pint-1:hover .tooltip,
.pint-1:hover .tooltip:before,
.pint-1:hover .icon-tp {
  align-items: center;
  background-color: #c92228;
  color: white;
  transition: all 0.3s cubic-bezier(0, 1.4, 0.88, 1);
}
.youtube-1:hover,
.youtube-1:hover .tooltip,
.youtube-1:hover .tooltip:before,
.youtube-1:hover .icon-tp {
  align-items: center;
  background-color: #de463b;
  color: white;
  transition: all 0.3s cubic-bezier(0, 1.4, 0.88, 1);
}
@media (max-width: 767px) {
  .si-section {
    flex-direction: column;
  }
  .icon-tp:hover .tooltip {
    transform: translateX(-95px) translateY(20px);
  }
  .tooltip:before {
    left: 106%;
    bottom: 25%;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
  }
}