Safari中按钮Hover时Tooltip位置异常问题求助

核心问题 #

Safari 对原生 <button> 元素的伪元素（::before/::after）支持存在兼容性限制——按钮作为表单替换元素，其伪元素常无法正常渲染或定位，这就是你添加 -webkit- 前缀后仍无效的原因。

修复思路 #

把Tooltip的伪元素挂载到按钮的父容器 .buttonhover 上，利用父容器的相对定位控制位置，通过父容器的hover事件触发显示，绕过Safari对按钮伪元素的限制。

修改后的完整代码 #

HTML（仅调整data属性到父容器，不改变结构）

<div class="buttonhover" data-button="order your copy now">
  <button class="button">ORDER YOUR COPY NOW</button>
</div>

CSS

.buttonhover {
    position: relative;
    margin-top: 5em;
    margin-left: 5em;
}
.button{
   padding: 0.5em 1em;
   background-color: coral;
   border: none;
   border-radius: 0.3em;
}
/* 伪元素移到父容器 */
.buttonhover::before,
.buttonhover::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: all ease 0.2s;
    -webkit-transition: all ease 0.2s; /* 兼容旧版Safari */
}
/* Tooltip箭头 */
.buttonhover::before {
    content: "";
    border-width: 0 8px 10px 8px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
/* Tooltip文本框 */
.buttonhover::after {
    content: attr(data-button);
    width: 10em;
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 0.5em 0.7em;
    border-radius: 0.4em;
    bottom: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    text-align: center;
}
/* hover时显示 */
.buttonhover:hover::before,
.buttonhover:hover::after {
    opacity: 1;
}

备选方案（不修改HTML结构） #

如果不想调整data属性位置，给.button添加position: relative，同时重新计算伪元素的transform偏移值，但这种方法在部分旧版Safari中仍可能出现兼容性问题：

.button{
   /* 原有样式 */
   position: relative; /* 新增 */
}
.button::before {
    /* 原有样式 */
    transform: translate(250%, -180%); /* 调整偏移适配相对定位的按钮 */
    -webkit-transform: translate(250%, -180%);
}
.button::after {
    /* 原有样式 */
    transform: translate(-50%, -180%); /* 调整偏移 */
    -webkit-transform: translate(-50%, -180%);
}

内容的提问来源于stack exchange，提问作者ramishvili