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;
}

Answer 2

Try removing data-toggle and data-placement from the input field and instead add:

$(element).tooltip({
    placement : 'bottom'
});

to your javascript. I think the issue is that you are showing it with javascript but its not taking into account the "data-placement"=>"bottom" attribute until you have hovered over it.

Update
I take it back, something else must be happening. It seems to be working fine here, I think there most be something else in your javascript that is adding the other css.