Question

我正在尝试实现jQuery Validate Popover plugin并且它完美无缺...除了弹出窗口以白色显示，而不是它在插件的演示页面上显示的软红色。

我一直尝试使用CSS设置样式，我可以更改弹出颜色，但不能更改箭头：

.error-popover  {
    background-color: red;  <-- this works
    color:  white;
}

.error-popover .arrow:after {
    border-color: red transparent;   <-- this doesn't
}

您可以查看我正在尝试的内容here

我使用的是最新版本的Bootstrap3，jQuery和jQuery Validate。关于我在这里缺少什么的想法？

由于

Victor Espina

Answer 1

这种css风格似乎可以解决问题！

.popover.right > .arrow:after {
    border-right-color:red;
}

在jsfiddle上看到它here。

Answer 2

您需要指定其他css属性。

EG：.popover.right>.arrow和.popover.right>.arrow:after

调整后的代码：http://jsfiddle.net/Xuu3K/4/

.error-popover .arrow:after {
    /*border-color: red transparent;*/
}

.error-popover.right>.arrow:after {
    border-right-color: red;
}

Answer 3

试试这个添加了

 .popover.right > .arrow:after{ border-right-color:red;
}

参见工作示例： - http://jsfiddle.net/Xuu3K/5/

Answer 4

使用bootstrap工具提示：http://getbootstrap.com/javascript/#tooltips并在电子邮件的focusout函数中验证该条目，如果失败则调用bootstrap工具提示以显示错误

http://jsfiddle.net/Xuu3K/11/

确保正确导入jquery和bootstrap javascripts，否则它们可能会发生冲突或无法正常工作。

<强> - 更新 -

我做了更多更改来自定义tooltip

只需将以下CSS更改为您喜欢的内容：

.tooltip-inner {
    max-width: 500px;
    background-color: #E4F1FF;
    color: #4D4D4D;
    padding: 4px 10px;
    opacity: 1 !important;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #E4F1FF;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
.tooltip-arrow {
    border-color: #FFFFFF;
}
.tooltip.in {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}

如何更改jQuery Validate Popover的颜色

4 个答案: