подсказки половина текст отрезал, когда она находится в конце экрана

Question

<div style="width:0px"> 
    <a data-tooltip="Two different email addresses are required due to junk mail filters which may not allow our emails through to all servers. If you receive the email on both your work & home accounts please click on the link from your preferred email ID to validate your account to ensure only that email address will be used for future correspondence."><img src="images/info.png" class="info-img"/></a> 
</div> 

CSS

/* Add this attribute to the element that needs a tooltip */ 
[data-tooltip] { 
    position: relative; 
    z-index: 2; 
    cursor: pointer; 
} 
/* Hide the tooltip content by default */ 
[data-tooltip]:before, [data-tooltip]:after { 
    visibility: hidden; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
    opacity: 0; 
    pointer-events: none; 
} 
/* Position tooltip above the element */ 
[data-tooltip]:before { 
    position: absolute; 
    bottom: 150%; 
    left: 50%; 
    margin-bottom: 5px; 
    margin-left: -9em; 
    padding: 7px; 
    width: 160px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    background-color: #000; 
    background-color: hsla(0, 0%, 20%, 0.9); 
    color: #fff; 
    content: attr(data-tooltip); 
    text-align: center; 
    font-size: 14px; 
    line-height: 1.2; 
} 
/* Triangle hack to make tooltip look like a speech bubble */ 
[data-tooltip]:after { 
    position: absolute; 
    bottom: 150%; 
    left: 50%; 
    margin-left: -5px; 
    width: 0; 
    border-top: 5px solid #000; 
    border-top: 5px solid hsla(0, 0%, 20%, 0.9); 
    border-right: 5px solid transparent; 
    border-left: 5px solid transparent; 
    content:" "; 
    font-size: 0; 
    line-height: 0; 
} 
/* Show tooltip content on hover */ 
[data-tooltip]:hover:before, [data-tooltip]:hover:after { 
    visibility: visible; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
} 

кончик инструмента показан на клике в мобильном телефоне. Проблема в том, когда он достигает конца экрана, срезанный наконечник инструмента. Когда я нажимаю на значок, когда он находится в верхней части экрана, подсказка инструмента отображается вверху значка, а не внизу.

Answer 1

Я пробовал редактировать код. Кроме того, если вы хотите определенной позиции в мобильном использовании вида можно использовать

@media only screen and (max-width: 500px){ 
[data-tooltip]:before {//left:"some value";right:"some value";}[data-tooltip]:after{ 
     bottom: 227%; 
     left: 50%; 
     margin-left: 26px;} 
    } 

/* Add this attribute to the element that needs a tooltip */ 
 
[data-tooltip] { 
 
    position: relative; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
/* Hide the tooltip content by default */ 
 
[data-tooltip]:before, [data-tooltip]:after { 
 
    visibility: hidden; 
 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
 
    opacity: 0; 
 
    pointer-events: none; 
 
} 
 
/* Position tooltip above the element */ 
 
[data-tooltip]:before { 
 
    position: absolute; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-bottom: 5px; 
 
    margin-left: -9em; 
 
    padding: 7px; 
 
    width: 160px; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    background-color: #000; 
 
    background-color: hsla(0, 0%, 20%, 0.9); 
 
    color: #fff; 
 
    content: attr(data-tooltip); 
 
    text-align: center; 
 
    font-size: 14px; 
 
    line-height: 1.2; 
 
} 
 
/* Triangle hack to make tooltip look like a speech bubble */ 
 
[data-tooltip]:after { 
 
    position: absolute; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    width: 0; 
 
    border-top: 5px solid #000; 
 
    border-top: 5px solid hsla(0, 0%, 20%, 0.9); 
 
    border-right: 5px solid transparent; 
 
    border-left: 5px solid transparent; 
 
    content:" "; 
 
    font-size: 0; 
 
    line-height: 0; 
 
} 
 
/* Show tooltip content on hover */ 
 
[data-tooltip]:hover:before, [data-tooltip]:hover:after { 
 
    visibility: visible; 
 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
} 
 
    
 
/*edit*/ 
 
@media only screen and (max-width: 500px){ 
 
[data-tooltip]:before{ 
 
    position: absolute; 
 
    bottom: 150%; 
 
    left: 50%; 
 
    margin-bottom: -200px; 
 
    margin-left: 3em; 
 
    padding: 7px;} 
 
    
 
    [data-tooltip]:after{ 
 
    position: absolute; 
 
    bottom: 227%; 
 
    left: 50%; 
 
    margin-left: 26px;} 
 
}

<div style="width:0px"> 
 
    <a data-tooltip="Two different email addresses are required due to junk mail filters which may not allow our emails through to all servers. If you receive the email on both your work & home accounts please click on the link from your preferred email ID to validate your account to ensure only that email address will be used for future correspondence."><img src="https://dummyimage.com/50/red/000000.png&text=i" class="info-img"/></a> 
 
</div>