Tooltip/Popover Style

tooltip-share.scss

/**
 * Stylesheet for a blog post entitled A Medium-like Popover Without Any Dependencies on
 * https://www.mayneweb.com/p/a-medium-like-popover-without-any-dependencies/
 * 
 * @auther Daveyon Mayne <hello@mayneweb.com>
 */

.ToolTipShare {
  position: absolute;
  visibility: hidden;
  z-index: 500;
  -webkit-transition: none;
  transition: none;
  top: 0;
  left: 0;
}

.ToolTipShare, .ToolTipShare__arrow {
  width: 8%;
  text-align: center;
}

.ToolTipShare--active {
  display: inline-block;
  visibility: visible;
  -webkit-transition: top 75ms ease-out,left 75ms ease-out;
  transition: top 75ms ease-out,left 75ms ease-out;
  -webkit-animation: pop-upwards 180ms forwards linear;
  animation: pop-upwards 180ms forwards linear;
}

.ToolTipShare__inner {
  position: relative;
  background-image: linear-gradient(to bottom,rgba(49,49,47,.99),#262625);
  background-repeat: repeat-x;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 0 8px;
}

.ToolTipShare .ToolTipShare__arrow {
  position: absolute;
  bottom: -10px;
  margin-left: 40%;
  clip: rect(10px 20px 20px 0);
}

.ToolTipShare .ToolTipShare__arrow .ToolTipShare__arrow__span {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #262625;
  -webkit-transform: rotate(45deg) scale(.5);
  transform: rotate(45deg) scale(.5);
}

.ToolTipShare__inner__buttons__item {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  height: 44px;

  svg {
    fill: white;
  }
}

@-webkit-keyframes pop-upwards {
  0% {
      -webkit-transform: matrix(.97,0,0,1,0,12);
      transform: matrix(.97,0,0,1,0,12);
      opacity: 0
  }

  20% {
      -webkit-transform: matrix(.99,0,0,1,0,2);
      transform: matrix(.99,0,0,1,0,2);
      opacity: .7
  }

  40% {
      -webkit-transform: matrix(1,0,0,1,0,-1);
      transform: matrix(1,0,0,1,0,-1);
      opacity: 1
  }

  70% {
      -webkit-transform: matrix(1,0,0,1,0,0);
      transform: matrix(1,0,0,1,0,0);
      opacity: 1
  }

  100% {
      -webkit-transform: matrix(1,0,0,1,0,0);
      transform: matrix(1,0,0,1,0,0);
      opacity: 1
  }
}

@keyframes pop-upwards {
  0% {
      -webkit-transform: matrix(.97,0,0,1,0,12);
      transform: matrix(.97,0,0,1,0,12);
      opacity: 0
  }

  20% {
      -webkit-transform: matrix(.99,0,0,1,0,2);
      transform: matrix(.99,0,0,1,0,2);
      opacity: .7
  }

  40% {
      -webkit-transform: matrix(1,0,0,1,0,-1);
      transform: matrix(1,0,0,1,0,-1);
      opacity: 1
  }

  70% {
      -webkit-transform: matrix(1,0,0,1,0,0);
      transform: matrix(1,0,0,1,0,0);
      opacity: 1
  }

  100% {
      -webkit-transform: matrix(1,0,0,1,0,0);
      transform: matrix(1,0,0,1,0,0);
      opacity: 1
  }
}