I have some form elements in my webpage, and I am displaying popovers when the user makes a custom error that the database won't recognise- such as small usernames and the kind. I tried removing the popover arrow using:
(Relevant HTML)
<label for = "username" class = "visible-xs">Username</label>
<input type = "text" id = "username" class = "form-control in-image hidden"
placeholder = "Username" autocomplete = "off" data-container = "#one"
data-toggle = "popover" data-placement = "auto bottom" data-content = "Username Too Short">
(Relevant CSS)
.popover-content {
color: red;
font-size: 15px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #ff9;
}
.arrow {
display: none;
}
After I show the popover, the arrow is still displayed, and my arrow class has a lower priority than bootstrap classes. I have added the stylesheets properly, ie, my sheet after the bootstrap sheet, and yet this happens. (Hope the image is clear).
I found some answers on how to target the arrow class and it uses something like .popover > .arrow, but why doesn't this method work?