我正在使用Tooltip自定义样式插件...
现在我想显示我的工具提示消息,如这些站点上显示的和照片中所示(例如,带有箭头作为工具提示的一部分):
我尝试应用几个 CSS 规则,但我仍然无法让它看起来像我想要的那样......请帮助我。这是我的 CSS 代码:
body .ui-tooltip {
border-width:0;
}
.ui-tooltip,.arrow:after {
background:black;
border:0 solid white;
}
.ui-tooltip {
padding:10px;
color:white;
border-radius:5px;
font-family:Verdana, sans-serif;
font-size:12px;
text-transform:none;
}
.arrow {
width:70px;
height:16px;
position:absolute;
left:0!important;
margin-left:-25px;
top:55%;
}
.arrow.top {
top:-16px;
bottom:auto;
}
.arrow.left {
left:20%;
}
.arrow:after {
content:"";
position:absolute;
left:20px;
top:-20px;
width:25px;
height:25px;
box-shadow:6px 5px 9px -9px black;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
tranform:rotate(45deg);
}
.arrow.top:after {
bottom:-20px;
top:auto;
}
.ui-tooltip {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
filter:alpha(opacity=70);
opacity:0.7;
}
当我应用上面的 CSS 代码时,我的显示不显示完整的工具提示:
但我希望它看起来像这样,全尺寸:
我的 CSS 代码箭头有问题,它看起来不像我提供的示例。
编辑:
箭头问题现在没问题了......但是如果你看到想要的显示它和我想要的不一样
.ui-tooltip {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity:0.7;
}
我猜他们没有在 CSS 代码之上......你能建议他们如何透明工作吗
箭头的位置好像有点乱。我不能给你具体的值,因为我无法测试它。但我确信使用
width
和 left
元素的属性会给你想要的结果。尝试以下方法。
.arrow
jQuery UI Tooltip 有一个 Open Issue #6 将您的 .arrow {
width: 15px;
height: 6px;
position: absolute;
top: 50%;
}
.arrow.left {
left: -12px;
}
定义为
arrows
并且它们尚未在此插件中实现。如果您为花式箭头添加自己的
connectors
标记,工具提示可能会根据元素相对于浏览器视口的位置更改位置。这可能会导致您的箭头位于错误的位置。
相反,使用
jQuery qTip 插件,它包括箭头作为选项,我的意思是连接器,它将自动计算正确的位置。 这是一个截图,但是所有
corner connector examples for this tooltip plugin are seen HERE.
上图中的
connector
将演示放置在
blue text
处的qTip工具提示。话虽如此,工具提示本身知道将三角形的东西放在bottom left
.,它更容易使用,当你使用它时,你只需要包含你可以从这里下载的 CSS 和 JS 文件