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

【问题标题】：Using jQuery UI Tooltip with custom arrow causes tooltip issue使用带有自定义箭头的 jQuery UI 工具提示会导致工具提示问题
【发布时间】：2012-12-21 06:03:08
【问题描述】：

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

现在我想在这些网站上显示我的工具提示消息，并如图所示（例如，带有箭头作为工具提示的一部分）：

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

【问题讨论】：

那么问题是什么？它根本不显示吗？请详细说明您的问题。我们怎么知道你的结果是什么样的？
对不起兄弟.. 当我应用上面的 css 代码 i.imgur.com/4yCPu.png 但我想在下面显示 i.imgur.com/4Aco4.png 我的 css 代码箭头有问题，它没有提取显示作为提及
cssarrowplease.com
@user1920718，我的回答能解决你的问题吗？
@arttronics 对不起兄弟，没时间检查那个插件..

标签： jquery html css jquery-ui tooltip

【解决方案1】：

好像箭头的位置有点乱。我不能给你具体的值，因为我无法测试它。但我确信使用.arrow 元素的width 和left 属性会给你想要的结果。

试试下面的。

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

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

【讨论】：

【解决方案2】：

目前，jQuery UI Tooltip 有一个 Open Issue #6，它将您的 arrows 定义为 connectors，并且它们尚未在此插件中实现。

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

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

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

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

【讨论】：

【解决方案3】：

@Robinson你也可以使用Bootstrap Tooltip，这个比较好用，使用的时候只需要包含CSS和JS文件，可以从here下载

【讨论】：