首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用带自定义箭头的jQuery UI Tooltip导致工具提示问题?

如何使用带自定义箭头的jQuery UI Tooltip导致工具提示问题?

提问于 2018-05-31 00:49:16
回答 2关注 0查看 222

现在我想显示在这些网站上显示的我的工具提示消息,并显示在照片中:

在这里输入图像描述
在这里输入图像描述

我尝试应用几个CSS规则,但我仍然无法让它看起来像我想要的样子。这是我的CSS代码:

代码语言:javascript
复制
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代码时,我的显示不会显示完整的工具提示:

i.imgur.com/4yCPu.png
i.imgur.com/4yCPu.png

但我希望它看起来像这样,全尺寸:

在这里输入图像描述
在这里输入图像描述

但如果你看到想要的显示,它不是我想要的:

代码语言:javascript
复制
.ui-tooltip {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity:0.7;
} 

回答

和开发者交流更多问题细节吧,去 写回答
相关文章

相似问题

相关问答用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档