Бутстрап Поповер стрелка и позиционирование коробки

Я использую всплывающие окна Bootstrap для отображения информации о ссылке на зависании, прежде чем нажимать ссылку. Однако в настоящее время он работает на данный момент. Ссылки отображаются в раскрывающемся меню вверху страницы. Когда в первой ссылке есть много информации об этом, верхняя часть popover исчезает в верхней части страницы, поэтому вы не можете видеть ее содержимое. Я пытаюсь сделать это так, чтобы стрелка popover появлялась в верхнем левом углу popover (в отличие от среднего левого, что она делает сейчас), а верхняя часть поля пополнения находится на уровне со стрелкой, если это имеет смысл.

$('.popOver').popover({
    trigger: 'hover',
    html: true
});

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

Ответ 1

Вы можете настроить размещение popover или стрелку my манипулировать CSS .popover после отображения popover.

Например, это подталкивает верхнюю часть popover вниз на 22 пикселя.

$('[data-toggle=popover]').on('shown.bs.popover', function () {
  $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
})

Рабочая демонстрация: http://bootply.com/88325

Ответ 2

Я рекомендую использовать метод размещения, а не событие shown.bs.popover. Это не вызовет скачок popover при отображении элемента.

Вот как это работает:

$('[data-toggle=popover]').popover({
  placement: function(context, source) {
    var self = this;
    setTimeout(function() { 
      self.$arrow.css('top', 55);
      self.$tip.css('top', -45);
    }, 0);
    return 'right';
  },
});

Ответ 3

Мой вариант использования: размещение popover top, и мне нужно удалить стрелку.

Я следил за решением, предоставленным @Skelly, когда я использовал bootstrap 3.2.0. Одна из проблем заключается в том, что popover flash, поскольку свойство css top обновляется в shown.bs.popover.

Фактически вы можете переопределить свойство template при инициализации popover и добавить к нему margin-top (margin-left, если место слева/справа).

$('[data-toggle=popover]').popover({
  placement: 'top',
  template: '<div class="popover" role="tooltip" style="margin-top:10px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

demo: http://www.bootply.com/gWwmO5XdbL

Ответ 4

Он предоставит точное положение стрелке ур

 $(el).on('shown.bs.popover', function () {
    var position = parseInt($('.popover').position().top);
    var pos2 = parseInt($(el).position().top) - 5;
    var x = pos2 - position + 5;
     if (popoverheight < x)
     x = popoverheight;
     $('.popover.left .arrow').css('top', x + 'px');
    });

Ответ 5

У меня возникли проблемы с popover, которые выходили выше, поэтому я не мог его увидеть. Это исправило это для меня

// Move things around if the popover is clipped on top.
if (parseInt($('.popover').position().top) < 10) {
  var arrow_position = parseInt($(this).position().top);
  $('.popover').css('top', 10 + 'px');
  $('.popover .arrow').css('top', arrow_position + 'px');
}