Html 工具提示位于屏幕末尾时，半个文本将被截断

工具提示显示在手机中的单击按钮上。问题是当它到达屏幕末端时，刀尖会被切断。当我在屏幕顶部单击图标时，工具提示显示在图标顶部而不是底部。

我已尝试编辑代码。 另外，如果您想在移动视图中使用特定位置，也可以使用

/* 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;
 }

/*将此属性添加到需要工具提示的元素中*/
[数据工具提示]{
位置：相对位置；
z指数：2；
光标：指针；
}
/*默认情况下隐藏工具提示内容*/
[数据工具提示]：之前[数据工具提示]：之后{
可见性：隐藏；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=0）；
不透明度：0；
指针事件：无；
}
/*将工具提示放置在图元上方*/
[数据工具提示]：之前{
位置：绝对位置；
底部：150%；
左：50%；
边缘底部：5px；
左边距：-9em；
填充：7px；
宽度：160px；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
背景色：#000；
背景色：hsla（0,0%，20%，0.9）；
颜色：#fff；
内容：attr（数据工具提示）；
文本对齐：居中；
字体大小：14px；
线高：1.2；
}
/*三角黑客使工具提示看起来像一个演讲泡泡*/
[数据工具提示]：在{
位置：绝对位置；
底部：150%；
左：50%；
左边距：-5px；
宽度：0；
边框顶部：5px实心#000；
边框顶部：5px实心hsla（0,0%，20%，0.9）；
右边框：5px实心透明；
左边框：5px实心透明；
内容：“；
字号：0；
线高：0；
}
/*悬停时显示工具提示内容*/
[数据工具提示]：悬停：之前[数据工具提示]：悬停：之后{
能见度：可见；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=100）；
不透明度：1；
}
/*编辑*/
@仅介质屏幕和（最大宽度：500px）{
[数据工具提示]：之前{
位置：绝对位置；
底部：150%；
左：50%；
边缘底部：-200px；
左边距：3em；
填充：7px；}
[数据工具提示]：在{
位置：绝对位置；
底部：227%；
左：50%；
左边距：26px；}
}

---

如果没有JavaScript，这是不可能的，因为需要决定工具提示在视口中是否可见。

/* 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;
 }

@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;}
    }