[css] 使用css实现悬浮提示文本

<div class="tips-demo" data-tips="提示文本">演示文本</div>

<style>
.tips-demo {
  position: fixed;
  bottom: 15px;
  right: 15px;
}

.tips-demo:after {
    content: attr(data-tips);
    position: absolute;
    top: 0;
    left: 0;
	right: 0;
	margin: 0 auto;
    white-space: nowrap;
	opacity: 0;
    transform: translateY(-150%);
    transition: .1s;
}

.tips-demo:hover:after {
	opacity: 1;
    transform: translateY(-100%);
}
</style>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题