我試圖制作一個工具提示，在鼠標(biāo)懸停在按鈕上時使用偽元素。但它可以在谷歌瀏覽器上運行，而不能在safari瀏覽器上運行。我也添加了webkit，但是什么都沒有改變。

這是我的代碼，我使用了轉(zhuǎn)換屬性，我嘗試了上下左右，但仍然沒有結(jié)果。

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

.buttonhover {
    position: relative;
    margin-top: 5em;
    margin-left: 5em;
}
.button{
   padding: 0.5em 1em;
   background-color: coral;
   border: none;
   border-radius: 0.3em;
}
.button::before,
.button::after {
    
    position: absolute;
    -webkit-position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: all ease 0.2s;
}
.button::before {
    content: "";
    border-width: 0 8px 10px 8px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
    transform: translate(450%, 330%);
    -webkit-transform: translate(450%, 330%);
}
.button::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;
    transform: translate(-105%, 150%);
    -webkit-transform: translate(-105%, 150%);
    top: 0.4em;
}
.button:hover::before,
.button:hover::after {
    opacity: 1;
}

因為您使用的是相對于字體大小的長度單位，所以您希望確保所有瀏覽器都使用相同的字體大小(可能還有字體系列)。