我可以在移动设备的屏幕中间放置工具提示吗？

Question

有没有一种方法可以使用CSS将工具提示的位置设置在屏幕的中心，而不是相对于文本的位置？ 我正在尝试使工具提示在移动设备上更好地工作。

@media only screen and (max-width: 500px){
.tip:hover span {
    position: absolute; 
    width: 19em;    
  }
}

Answer 1

在手机上使用:hover不是一个好主意。 我已经更新了CSS，但是您的工具提示可能会剪切掉用户的视口。

 @media only screen and (max-width: 500px){ /* As stated not sure why you'd use :hover for mobile. */ .tip:hover span { display: inline-block; position: absolute; top: calc(100vh/2); left: calc(100vw/2); transform: translateX(-50%); } } 

 <div class="tip"> <span>Tooltip Content</span> </div> 

Answer 2

这可能有效吗？ 您没有提供很多原始代码。

 @media only screen and (max-width: 500px){ .tip:hover span { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 19em; } } 

 <div class="tip"> <span>Tooltip Content</span> </div>