html - 如何使用 CSS 使工具提示移动友好

Question

我在移动设备中制作工具提示位置中心时遇到了一些麻烦。根据工具提示图标的位置，它会被剪切并最终出现在不同的地方。我写了“位置：中心”，这显然不起作用。请帮我。:)

.tooltip {   
position: relative;   
display: inline-block;   
border-bottom: none;   
color: #516A66; 
}

.tooltip .tooltiptext {   
visibility: hidden;   
width: 400px !important;   
background-color: #516A66;   
color: #fff;   
text-align: center;   
border-radius: 6px;   
padding: 20px;   
position: absolute;   
z-index: 1;   
top: 100%;   
left: 50%;   
margin-left: -200px;   
opacity: 0;   
transition: opacity 1s; 
}

@media only screen and (max-width: 767px){
.tooltip .tooltiptext { 
position: center; 
width: 200px !important;   
}} 

.tooltip:hover .tooltiptext { 
visibility: visible;   
opacity: 1; 
}  

.tooltip .tooltiptext::after {  
content: " ";
position: absolute;
bottom: 100%;  
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #516A66 transparent
}

.tooltip:hover .tooltiptext { 
visibility: visible; 
} 

标签： htmlcssmobile