SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
var tip = document.querySelector('div.tooltip');
var btn = document.querySelector('button.btn');
var popper = new Popper(btn, tip, {
  placement : 'top',
});
$(btn).hover(function(){
  tip.classList.add('show');
},function(){
  tip.classList.remove('show');
});

            
<body style="padding-top: 5em;">
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on top
    </button>
    <div class="tooltip fade bs-tooltip-top">
        <div class="arrow"></div>
        <div class="tooltip-inner">tooltip on top</div>
    </div>
    <div class="tooltip">tooltip on top</div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/popper.js@1.12.9/dist/umd/popper.min.js"></script>
</body>

            
//  按钮样式
.btn{
  display: inline-block;
  background:#007bff;
  color: #fff;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .25rem;
  outline: 0;
  &:not(.disabled):not(:disabled){
    cursor: pointer;
  }
  &:active{
    outline: 0;
    box-shadow: inset 0px 3px 3px rgba(#000, .2);
    &:focus{
      box-shadow: 0 0 0 3px rgba(#007bff, .25) 
    }
  }
}
// 过渡
.fade{
    transition: opacity .5s ease;
}
.tooltip{
    position: absolute;
    z-index: 1;
    display: block;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    &.show{
        opacity: .9;
        pointer-events: auto;
    }
    // 用伪元素画箭头 因为箭头伪元素没有高度和宽度属性
    // 所以需要一个容器包住它
    .arrow{
        position: absolute;
        display: block;
        width: .8rem;
        height: .4rem;
        &::before{
            position: absolute;
            content: "";
            border-color: transparent;
            border-style: solid;
        }
    }
}

// 利用 border 画箭头
.bs-tooltip-top{
    // 给空间显示箭头 
    padding: .4rem 0;
    .arrow{
        bottom: 0;
        left:0 ; right:0;
        margin:0 auto;
        &::before{
            width: 0;
            height: 0;
            border-width: .4rem .4rem 0 .4rem ;
            border-top-color: #000;
        }
    }
}

.tooltip-inner{
    max-width: 200px;
    padding: .25rem .5rem;
    color: #fff;
    background: #000;
    border-radius: .25rem;
    text-align: center;
}