Выровнять подсказку 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.

Ответ 1

Я думаю, вам нужно настроить CSS tooltip-arrow и позицию всего tooltip. Это приблизит вас к этому, но может потребоваться больше настроек...

.tooltip-arrow CSS

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

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

Функция jQuery для настройки размещения всплывающей подсказки.

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

Demo on Bootply

EDIT: вы можете также позиционировать .tooltip только с помощью CSS. Альтернативная демонстрация

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

Ответ 2

Чтобы выполнить следующий макет:

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

CSS

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

JS

$('[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);
});

Существует небольшая задержка из-за скрытия и отображения всплывающей подсказки, но позиционирование отлично работает независимо от размера всплывающей подсказки.