问题描述
我很难找到可以同时在许多设备（包括IOS）上运行的工具提示代码。 我已将此代码添加到我的页面中，并且在所有设备上都能正常工作，当我在页面边缘附近添加一些文本并向其添加工具提示时，就会出现问题。 当前会打开工具提示弹出窗口，这很好，但是如果我在页面的左侧或右侧附近打开它，则只会显示一半的工具提示。
第二个问题是我有一个侧面导航栏，工具提示始终显示在导航栏后面。我试图将z-index更改为999，但这无济于事。
这是我的CSS：
/*TOOLTIPS WORKING ALSO FOR IOS*/
/* Base styles for the element that has a tooltip */
[data-tooltip],.tooltip {
position: relative;
cursor: pointer;
}
/* Base styles for the entire tooltip */
[data-tooltip]:before,[data-tooltip]:after,.tooltip:before,.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition:
opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,-webkit-transform 0.2s cubic-bezier(0.71,1.7,0.77,1.24);
-moz-transition:
opacity 0.2s ease-in-out,-moz-transform 0.2s cubic-bezier(0.71,1.24);
transition:
opacity 0.2s ease-in-out,transform 0.2s cubic-bezier(0.71,1.24);
-webkit-transform: translate3d(0,0);
-moz-transform: translate3d(0,0);
transform: translate3d(0,0);
pointer-events: none;
}
/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,[data-tooltip]:hover:after,[data-tooltip]:focus:before,[data-tooltip]:focus:after,.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* Base styles for the tooltip's directional arrow */
.tooltip:before,[data-tooltip]:before {
z-index: 999;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Base styles for the tooltip's content area */
.tooltip:after,[data-tooltip]:after {
z-index: 999;
padding: 8px;
width: 350px;
background-color: #000;
background-color: hsla(0,0%,20%,0.9);
color: #fff;
content: attr(data-tooltip);
font-size: 14px;
line-height: 1.2;
}
/* Directions */
/* Top (default) */
[data-tooltip]:before,.tooltip:after,.tooltip-top:before,.tooltip-top:after {
bottom: 100%;
left: 50%;
}
[data-tooltip]:before,.tooltip-top:before {
margin-left: -6px;
margin-bottom: -12px;
border-top-color: #000;
border-top-color: hsla(0,0.9);
}
/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,.tooltip-top:after {
margin-left: -80px;
}
[data-tooltip]:hover:before,.tooltip:focus:after,.tooltip-top:hover:before,.tooltip-top:hover:after,.tooltip-top:focus:before,.tooltip-top:focus:after {
-webkit-transform: translateY(-12px);
-moz-transform: translateY(-12px);
transform: translateY(-12px);
}
/* Left */
.tooltip-left:before,.tooltip-left:after {
right: 100%;
bottom: 50%;
left: auto;
}
.tooltip-left:before {
margin-left: 0;
margin-right: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-left-color: #000;
border-left-color: hsla(0,0.9);
}
.tooltip-left:hover:before,.tooltip-left:hover:after,.tooltip-left:focus:before,.tooltip-left:focus:after {
-webkit-transform: translateX(-12px);
-moz-transform: translateX(-12px);
transform: translateX(-12px);
}
/* Bottom */
.tooltip-bottom:before,.tooltip-bottom:after {
top: 100%;
bottom: auto;
left: 50%;
}
.tooltip-bottom:before {
margin-top: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-bottom-color: #000;
border-bottom-color: hsla(0,0.9);
}
.tooltip-bottom:hover:before,.tooltip-bottom:hover:after,.tooltip-bottom:focus:before,.tooltip-bottom:focus:after {
-webkit-transform: translateY(12px);
-moz-transform: translateY(12px);
transform: translateY(12px);
}
/* Right */
.tooltip-right:before,.tooltip-right:after {
bottom: 50%;
left: 100%;
}
.tooltip-right:before {
margin-bottom: 0;
margin-left: -12px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0,0.9);
}
.tooltip-right:hover:before,.tooltip-right:hover:after,.tooltip-right:focus:before,.tooltip-right:focus:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,.tooltip-right:before {
top: 3px;
}
/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,.tooltip-right:after {
margin-left: 0;
margin-bottom: -16px;
}
谢谢。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）