html css 创建 ToolTip 笔记

html css 创建 ToolTip 笔记

效果：

代码如下：

<template><div class="tooltip">悬停查看提示<span class="tooltiptext">这是一个CSS自定义tooltip</span></div>
</template><style lang="css" scoped>
.tooltip {position: relative;display: inline-block;cursor: pointer;
}.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: #333;color: #fff;text-align: center;padding: 5px;border-radius: 5px;position: absolute;z-index: 1;bottom: 125%;/* 在元素上方 */left: 50%;transform: translateX(-50%);opacity: 0;transition: opacity 0.3s;
}.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;
}
</style><script lang="js">
</script>