pico/scss/utilities/_tooltip.scss

/**
 * Tooltip ([data-tooltip])
 */

[data-tooltip] {
  position: relative;

  &:not(a, button, input) {
    border-bottom: 1px dotted;
    text-decoration: none;
    cursor: help;
  }

  &[data-placement="top"]::before,
  &[data-placement="top"]::after,
  &::before,
  &::after {
    display: block;
    z-index: 99;
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding: .25rem .5rem;
    overflow: hidden;
    transform: translate(-50%, -.25rem);
    border-radius: var(--border-radius);
    background: var(--tooltip-background-color);
    content: attr(data-tooltip);
    color: var(--tooltip-color);
    font-style: normal;
    font-weight: var(--font-weight);
    font-size: .875rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }
  
  // Caret
  &[data-placement="top"]::after,
  &::after {
    padding: 0;
    transform: translate(-50%, 0rem);
    border-top: .3rem solid;
    border-right: .3rem solid transparent;
    border-left: .3rem solid transparent;
    border-radius: 0;
    background-color: transparent;
    content: "";
    color: var(--tooltip-background-color);
  }

  &[data-placement="bottom"] {
    &::before,
    &::after {
      top: 100%;
      bottom: auto;
      transform: translate(-50%, .25rem);
    }
    
    &:after{
      transform: translate(-50%, -.3rem);
      border: .3rem solid transparent;
      border-bottom: .3rem solid;
    }
  }

  &[data-placement="left"] {
    &::before,
    &::after {
      top: 50%;
      right: 100%;
      bottom: auto;
      left: auto;
      transform: translate(-.25rem, -50%);
    }
    
    &:after{
      transform: translate(.3rem, -50%);
      border: .3rem solid transparent;
      border-left: .3rem solid;
    }
  }

  &[data-placement="right"] {
    &::before,
    &::after {
      top: 50%;
      right: auto;
      bottom: auto;
      left: 100%;
      transform: translate(.25rem, -50%);
    }
    
    &:after{
      transform: translate(-.3rem, -50%);
      border: .3rem solid transparent;
      border-right: .3rem solid;
    }
  }

  // Display
  &:focus,
  &:hover {
    &::before,
    &::after {
      opacity: 1;
    }
  }

  
  @if $enable-transitions {

    // Animations, excluding touch devices
    @media (hover: hover) and (pointer: fine) {
      &[data-placement="bottom"]:focus,
      &[data-placement="bottom"]:hover
      &:focus,
      &:hover {
        &::before,
        &::after {
          animation-duration: .2s;
          animation-name: tooltip-slide-top;
        }

        &::after {
          animation-name: tooltip-caret-slide-top; 
        }
      }
      
      &[data-placement="bottom"] {
        &:focus,
        &:hover {
          &::before,
          &::after {
            animation-duration: .2s;
            animation-name: tooltip-slide-bottom;
          }
  
          &::after {
            animation-name: tooltip-caret-slide-bottom; 
          }
        }
      }
      
      &[data-placement="left"] {
        &:focus,
        &:hover {
          &::before,
          &::after {
            animation-duration: .2s;
            animation-name: tooltip-slide-left;
          }
  
          &::after {
            animation-name: tooltip-caret-slide-left; 
          }
        }
      }
      
      &[data-placement="right"] {
        &:focus,
        &:hover {
          &::before,
          &::after {
            animation-duration: .2s;
            animation-name: tooltip-slide-right;
          }
  
          &::after {
            animation-name: tooltip-caret-slide-right; 
          }
        }
      }
    }

    @keyframes tooltip-slide-top {
      from {
        transform: translate(-50%, .75rem);
        opacity: 0;
      }
      to {
        transform: translate(-50%, -.25rem);
        opacity: 1;
      }
    }
    
    @keyframes tooltip-caret-slide-top {
      from {
        opacity: 0;
      }
      50% {
        transform: translate(-50%, -.25rem);
        opacity: 0;
      }
      to {
        transform: translate(-50%, 0rem);
        opacity: 1;
      }
    }
  
    @keyframes tooltip-slide-bottom {
      from {
        transform: translate(-50%, -.75rem);
        opacity: 0;
      }
      to {
        transform: translate(-50%, .25rem);
        opacity: 1;
      }
    }
    
    @keyframes tooltip-caret-slide-bottom {
      from {
        opacity: 0;
      }
      50% {
        transform: translate(-50%, -.5rem);
        opacity: 0;
      }
      to {
        transform: translate(-50%, -.3rem);
        opacity: 1;
      }
    }
  
    @keyframes tooltip-slide-left {
      from {
        transform: translate(.75rem, -50%);
        opacity: 0;
      }
      to {
        transform: translate(-.25rem, -50%);
        opacity: 1;
      }
    }
    
    @keyframes tooltip-caret-slide-left {
      from {
        opacity: 0;
      }
      50% {
        transform: translate(.05rem, -50%);
        opacity: 0;
      }
      to {
        transform: translate(.3rem, -50%);
        opacity: 1;
      }
    }
  
    @keyframes tooltip-slide-right {
      from {
        transform: translate(-.75rem, -50%);
        opacity: 0;
      }
      to {
        transform: translate(.25rem, -50%);
        opacity: 1;
      }
    }
    
    @keyframes tooltip-caret-slide-right {
      from {
        opacity: 0;
      }
      50% {
        transform: translate(-.05rem, -50%);
        opacity: 0;
      }
      to {
        transform: translate(-.3rem, -50%);
        opacity: 1;
      }
    }
  }
}