Bootstrap tooltip change class and over ride styling

Question

I have an action that checks if a field is blank or not and then triggers a tooltip to be shown if it is blank. The tooltip is not shown unless the field is blank. When the action is executed the tooltip is showing but it is showing at the top of the parent div and then moves to the bottom when the field is hovered over. I would like the tooltip to show on the bottom upon the action and hover.

HTML

<div class="col-xs-5" >
  <%= label_tag :first_name, "First Name", class: "large-white-font" %>
  <%= ff.text_field :first_name, placeholder: 'First Name', style: "padding-left: 5%", "data-toggle"=>"tooltip", "data-placement"=>"bottom", "title"=>"Oops, please enter"%>
</div>

JS

if ($(element).val() === ""){
    $(element).tooltip("show");
} else{
    $(element).tooltip("destroy");      
};

CSS when at incorrectly at the top after action

element.style {
top: 3px;
left: 0px;
display: block;
}

newmedia="all"
.tooltip.bottom {
margin-top: 3px;
padding: 5px 0;
}

Any eyes see what I can't?

Answer 1

In order to ovveride the unwanted styling I added a class to the tooltip

JS

$(element).tooltip({
  template: '<div class="tooltip tooltip-adjust-bottom">
  <div class="tooltip-arrow"></div><div class="tooltip-inner">
  </div></div>'
}).tooltip("show");

CSS

.tooltip-adjust-bottom{
  top: auto !important;
  left: 35px !important;
}