css3伪元素和平移（translate）变换实现的提示框

 <div class="row">
        <a rel="nofollow" rel="noreferrer" href="#" class="btn tooltip top">
            <span>TOOLTIP TOP</span>
            <span class="tooltip-content">Lorem ipsum dolor sit amet</span>
        </a>
    </div>
复制代码

.tooltip .tooltip-content::after {
    background: #05a8ff;
    content: "";
    height: 10px;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 10px;
}
.tooltip.top .tooltip-content {
    bottom: calc(100% + 1.5em);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.tooltip.top .tooltip-content::after {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
}
复制代码

效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9078.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9078.html