Bootstrap验证错误消息CSS

Question

我正在使用Bootstrap 3 Popover Validation With JQuery。我正面临着css的问题。我在表格中有文本框。验证工作正常唯一的问题是无法在相应的文本框上方显示错误。

上图中的错误应指向我突出显示的右侧文本框，但不会以这种方式发生。我用于着色的CSS是：

CSS

.popover.error-popover {
    background-color: #F2DEDE;
    border-color: #EED3D7;
    box-shadow: none;
    color: #B94A48;
    cursor: pointer;
    max-width: none;
    z-index: 1099;
}
</style>

JS代码是：

$('#myform').validate_popover({onsubmit: false, popoverPosition: 'top'});

HTML 每个文本框的宽度为55.这是上表的结构。

<form id="myform">
<table>
<tr>
<td>
<input style="width:55px" name="code" />
</td>
<td>
<input style="width:55px" id="type" name="type"/>
</td>
.
.
.
</tr>
</table>
</form>

Answer 1

您还需要为箭头设置css定义：

.popover.error-popover.top .arrow {
    border-top-color: #EED3D7;
    left: 30px;
}

使用颜色（style.css）in this Plunker