使用带有自定义箭头的jQuery UI工具提示会导致工具提示问题

我在用

现在，我想显示这些网站上显示的工具提示信息以及照片中显示的信息（例如，工具提示中有一个箭头）：

我尝试应用一些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代码。。。你能告诉我，他们的透明工作看起来像是箭头的位置有点乱吗。我不能给你具体的数值，因为我不能测试它。但是我确信使用

.arrow

元素的

width

和

left

属性将获得所需的结果

尝试以下方法

.arrow {
    width: 15px;
    height: 6px;
    position: absolute;
    top: 50%;
}

.arrow.left {
    left: -12px;
}

目前，有一个将

箭头

定义为

连接器

的插件，它们尚未在此插件中实现

如果为花式箭头添加自己的

连接器

标记，则工具提示可能会根据元素相对于浏览器视口的位置更改位置。这可能会导致箭头位置错误

相反，使用包含箭头的选项，我指的是连接器，它将自动计算正确的位置

这里是一个屏幕截图，但是可以看到此工具提示插件的所有角连接器示例

---

上图中的

蓝色文本

将演示放置在

左下角的qTip工具提示。话虽如此，工具提示本身知道将三角形的东西放在右上角，你也可以使用它，这非常容易使用，当你使用它时，你只需要包含可以从
下载的CSS和JS文件，那么问题出在哪里呢？它根本不显示吗？请详细说明你的问题。我们怎么知道你那边是什么样子？对不起，兄弟。。我的显示当我应用上面的css代码，但我想下面显示我的css代码箭头有问题，它不是提取显示mention@user1920718，我的回答解决了你的问题吗？@arttronics抱歉，兄弟，没有时间检查插件。。