Bootstrap Validation Error Messages CSS

Question

I am using Bootstrap 3 Popover Validation With JQuery . I am facing the issue of the css. I have textboxes in table. Validation is working fine the only issue is that unable to show error above the respective textbox.

.

The error in the above picture should points to the right textbox which i have highlighted but its not happening this way. CSS I used for coloring is:

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 code is:

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

HTML The width of each textbox is 55. here is a structure of the above table.

<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

You need to setup css definition for the arrow too:

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

Play around with colors (style.css) in this Plunker