Bootstrap tooltip left bottom position

Question

В моей форме проверки Я использую всплывающие подсказки для отображения сообщения об ошибке.
Я настроил CSS, чтобы изменить внешний вид (IMG 1)

/* Tooltip */ 
form .tooltip > .tooltip-inner { 
    background-color: #843534; 
    color: #FFFFFF; 
    border: 0px; 
    padding: 0 4px; 
    font-size: 9px; 
    letter-spacing: 0.5px; 
} 
.tooltip.bottom { 
    padding: 0px !important; 
    margin-top: -6px !important; 
} 
/* Tooltip arrow */ 
form .tooltip.top > .tooltip-arrow, 
form .tooltip.bottom > .tooltip-arrow, 
form .tooltip.left > .tooltip-arrow, 
form .tooltip.right > .tooltip-arrow { 
    border: 0px; 
} 

Я бы на месте моей подсказке слева от элемента, как в IMG 2 , но я не нашел способ сделать это. (Нижний левый не работает)

Bootply

Как бы это сделать? Спасибо

Answer 1

изменить CSS, как показано ниже,

form .tooltip > .tooltip-inner { 
    background-color: #843534; 
    color: #FFFFFF; 
    border: 0px; 
    padding: 0 0px; 
    font-size: 9px; 
    letter-spacing: 0.5px; 
    margin-left: -352px; 
} 
.tooltip-inner { 
    max-width: 85px; 
    text-align: center; 
    border-radius: 4px; 
} 

Answer 2

Пожалуйста, добавьте следующее в вашем CSS:

.tooltip{ 
    left:20px !important; 
} 

Answer 3

Согласно пера, просто добавьте этот CSS к вашему CSS

.tooltip.fade.bottom 
{ 
    left:30px !important; 
} 

Я просто использую !important, чтобы переопределить текущее значение слева и u получит ваш результат.