在WordPress中通过CSS实现按钮鼠标Hover悬停时提示文本信息

在网页编辑的时候，很多时候会出现按钮文字信息过多，这个时候按钮需要显示精简的内容，多出的内容就需要提示信息来补充说民，在wordoress中想要实现按钮悬浮显示文字提示信息，我们可以通过CSS设置来实现。

实现的过程非常简单，首先我们在wordoress块编辑器或者页面架构器elementor中添加按钮部件，然后我们为按钮添加额外的css类，可以为类起名为 hover-text-btn。

添加按钮的css类后就可以在css设置中添加以下代码就可以，注意如果类的名称不一致，把下面代码的类改成你自定义的类即可。

/* 添加到Elementor的自定义CSS或主题的额外CSS */
.hover-text-btn {
    position: relative;
    display: inline-block;
}

.hover-text-btn::before {
    content: "这里的文字替换成你要显示的文本信息";
    position: absolute;
    bottom: 100%; /* 使提示文本紧贴按钮上方 */
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    width: 280px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 999;
}

/* 气泡箭头 */
.hover-text-btn::after {
    content: "";
    position: absolute;
    bottom: calc(100% - 5px); /* 调整箭头位置，使其紧贴按钮 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.hover-text-btn:hover::before,
.hover-text-btn:hover::after {
    opacity: 1;
    visibility: visible;
}