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

Question

我正在使用Tooltip custom style plugin ...

现在我想显示这些网站上显示的工具提示消息，如照片所示（，例如，箭头是工具提示的一部分）：

• Example link
• Example link

我尝试应用几个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代码...你能不能建议他们透明的工作方式

Answer 1

似乎箭头的位置有点搞砸了。我不能给你具体的价值，因为我无法测试它。但我确信使用width元素的left和.arrow属性可以获得所需的结果。

请尝试以下操作。

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

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

Answer 2

目前，jQuery UI Tooltip有一个Open Issue #6，将arrows定义为connectors，但此插件尚未实现。

如果您为花式箭头添加了自己的connector标记，则工具提示可能会根据相对于浏览器视口的元素位置更改位置。这可能会导致您的箭头位于错误的位置。

相反，使用包含箭头作为选项的jQuery qTip Plugin，我的意思是连接器，它会自动计算正确的位置。

以下是截图，但此工具提示插件的所有 角连接器示例 均显示为HERE。

上面照片中的blue text会演示qTip工具提示放在bottom left。话虽如此，工具提示本身知道将三角形的东西放在top right。

Answer 3

@Robinson您也可以使用Bootstrap Tooltip，它更容易使用，当您使用它时，您只需要包含可以从here下载的CSS和JS文件