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>

工具提示半边文字在屏幕末尾被截断

1 个答案: