SOURCE

let tip = document.querySelector('.tip')
let btn = document.querySelector('button')

class Tip {
  init (text) {
    let tip = this.createTip(text)
    document.body.appendChild(tip)
    let timer = setTimeout(() => {
      tip.classList.add('tip-fade')
      document.body.removeChild(tip)
      clearTimeout(timer)
    }, 1800)
  }
  createTip (text) {
    let tip = document.createElement('div')
    tip.classList.add('tip')
    tip.textContent = text
    return tip
  }
  static show (text) {
    // 单例
    if (!Tip.instance) {
      Tip.instance = new Tip()
    }
    Tip.instance.init(text) 
  }
}

btn.addEventListener('click', () => {
  Tip.show(66666)
})

<!-- <div class="tip">tooltip</div> -->
<button>123</button>

.tip {
  width: 200px;
  height: 50px;
  background: rgba(159,42,36,.2);
  line-height: 50px;
  text-align: center;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  animation: up .8s ease forwards;
}

.tip-fade {
 /*  animation: fade .8s ease forwards; */
}

@keyframes up {
  from {
    top: 100%;
    margin-top: 0;
  }
  to {
    top: 50%;
    margin-top: -50px;
  }
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}