Выровнять подсказку Bootstrap слева от элемента?

Я использую подсказку Bootstrap script и имею проблему, когда у меня есть всплывающая подсказка об усеченном тексте. Я использую CSS для обрезания текста, а затем имею всплывающую подсказку по этому тексту, чтобы вы могли навести указатель мыши на полный текст. Моя проблема заключается в том, что когда текст усечен, всплывающая подсказка по-прежнему сосредоточена на элементе, как если бы он не был усечен.

Помимо этой проблемы, я бы просто подумал, что она будет выглядеть так же, как и следующая. Я хотел бы иметь его так, чтобы подсказка выравнивалась слева от элемента, а стрелка на всплывающей подсказке тоже левела. Или, если всплывающая подсказка находится сбоку от элемента, она выравнивается по верхней части и стрелка находится сверху.

В основном это выглядит так:

             ################
             # TOOLTIP      #
             ################
                    v
Some really long text th...

Я хотел бы, чтобы это выглядело так:

################
# TOOLTIP      #
################
 v
Some really long text th...

Или на стороне, подобной этой:

################ > Some really long text th...
# TOOLTIP      #
################

Спасибо.

[РЕДАКТИРОВАТЬ] Я вытащил движение стрелки, это просто css. Но выравнивание самой всплывающей подсказки, похоже, является частью javascript.

Ответы

.tooltip.right .tooltip-arrow{
    top: 5%;
    margin-top: 0px;
}

.tooltip.top .tooltip-arrow{
    left: 6%;
    bottom:1px;
}

$("[data-placement=right]").hover(function(){
    $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 8 + 'px')
});

.tooltip.right {
    margin-top:8px;
}

          element
             ^
################
# TOOLTIP      #
################

.tooltip.bottom .tooltip-arrow {
  left: 90% !important;
}

$('[data-toggle=tooltip]').on('inserted.bs.tooltip', function() {
  $('.tooltip').css('opacity', 0);
});

$(''[data-toggle=tooltip]'').on('shown.bs.tooltip', function() {
  var $tooltip = $('.tooltip');
  $tooltip.css('left', $tooltip.offset().left - $tooltip.width() / 2);
  $tooltip.css('opacity', 1);
});