css tips浮动提示信息

在网页设计中，我们常常需要添加浮动提示信息来提高用户体验。这里提供几个css tips让你轻松实现浮动提示信息。

/* Tip #1: 使用:before伪元素 */.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip:before {
    content: attr(data-tooltip);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    background-color: #000;
    color: #fff;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.tooltip:hover:before {
    opacity: 1;
}
/* Tip #2: 使用transform属性 */.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateY(5px);
}
/* Tip #3: 使用JS来实现 */function showTooltip(event, text) {
    const tooltip = document.createElement("div");
    tooltip.classList.add("tooltip");
    tooltip.innerHTML = text;
    document.body.appendChild(tooltip);
    tooltip.style.top = event.pageY + 10 + "px";
    tooltip.style.left = event.pageX + 10 + "px";
}
function hideTooltip() {
    const tooltip = document.querySelector(".tooltip");
if (tooltip) {
    document.body.removeChild(tooltip);
}
}
    

以上三种方法均可实现常见的浮动提示信息效果。你可以根据项目需要选择合适的实现方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！