Ответ 1

Это работает. Испытано.

.popover {
    top: 71px !important;
    left: 379px !important;
}

Ответ 2

Просто добавьте атрибут к вашему поповеру! Смотрите мой JSFiddle, если вы спешите.

Мы хотим добавить идентификатор или класс для определенного всплывающего окна, чтобы мы могли настроить его так, как мы хотим с помощью CSS.

Обратите внимание, что мы не хотим настраивать все всплывающие окна! Это ужасная идея.

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

// We add the id 'my-popover'
$("#my-button").popover({
    html : true,
    placement: 'bottom'
}).data('bs.popover').tip().attr('id', 'my-popover');

#my-popover {
    left: -169px!important;
}
#my-popover .arrow {
    left: 90%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button id="my-button" data-toggle="popover">My Button</button>

Ответ 3

Я создал плагин jQuery, который содержит 4 дополнительных места размещения: topLeft, topRight, bottomLeft, bottomRight

Вы просто включаете либо мини-js, либо unminified js и имеете соответствующий css (minified vs unminified) в той же папке.

https://github.com/dkleehammer/bootstrap-popover-extra-placements

Ответ 4

Popover Viewport (Bootstrap v3)

Лучшее решение, которое будет работать для вас во всех случаях, особенно если ваш веб-сайт имеет плавную ширину, - это использовать опцию области просмотра Bootstrap Popover.

Это заставит поповер принимать ширину внутри селектора, который вы назначили. Таким образом, если кнопка триггера находится справа от этого контейнера, стрелка начальной загрузки также появится справа, пока поповер находится внутри этой области. Смотрите jsfiddle.net

Вы также можете использовать отступы, если вам нужно пространство от края контейнера. Если вы не хотите заполнять, просто используйте viewport:.container

$('#popoverButton').popover({
   container: 'body',
   placement: "bottom",
   html: true,   
   viewport: { selector: '.container', padding: 5 },
   content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
 });

в следующем примере HTML:

<div class="container">
   <button type="button" id="popoverButton">Click Me!</button>
</div>

и с CSS:

.container {
  text-align:right;
  width: 100px;
  padding: 20px;
  background: blue;
}

Popover Bounday (Bootstrap v4)

Как и в окне просмотра, в Bootstrap версии 4 popover представил новую границу параметра

https://getbootstrap.com/docs/4.1/components/popovers/#options

Ответ 5

Я решил это (частично), добавив некоторые строки кода в библиотеку bootstrap css. Вам нужно будет изменить tooltip.js, tooltip.less, popover.js и popover.less

в tooltip.js, добавьте этот случай в оператор switch там

case 'bottom-right':
          tp = {top: pos.top + pos.height, left: pos.left + pos.width}
          break

в tooltip.less, добавьте эти две строки в .tooltip {}

&.bottom-right { margin-top:   -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }

сделать то же самое в popover.js и popover.less. В принципе, везде, где вы находите код, где упоминаются другие позиции, добавьте нужную позицию соответственно.

Как я упоминал ранее, это частично разрешило проблему. Моя проблема заключается в том, что маленькая стрелка popover не появляется.

Примечание:, если вы хотите, чтобы popover в верхнем левом углу, используйте верхний атрибут '.top' и левый атрибут '.left'

Ответ 6

В bootstrap 3.0.0:

.popover{ right:0!important; }

И изменить тоже

.popover { max-width:WWWpx!important; } 

где WWW - это ваша правильная максимальная ширина, чтобы отобразить ваш popover-контент.

Ответ 7

Мне нужно было внести следующие изменения для попозиции в положение ниже с некоторым перекрытием и правильно показать стрелку.

js

case 'bottom-right':  
    tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}  
    break  

css

    .popover.bottom-right .arrow {  
      left: 20px; /* MODIFIED */  
      margin-left: -11px;  
      border-top-width: 0;  
      border-bottom-color: #999;  
      border-bottom-color: rgba(0, 0, 0, 0.25);  
      top: -11px;  
    }  
    .popover.bottom-right .arrow:after {  
      top: 1px;  
      margin-left: -10px;  
      border-top-width: 0;  
      border-bottom-color: #ffffff;  
    }  

Это можно расширить для местоположений стрелок в другом месте.. наслаждайтесь!

Ответ 8

Что вы можете. К счастью, есть чистый способ сделать это, и он также находится в документации всплывающего окна/всплывающей подсказки Bootstrap.

let mySpecialTooltip = $('#mySpecialTooltip); 
mySpecialTooltip.tooltip({
 container: 'body',
 placement: 'bottom',
 html: true,
 template: '<div class="tooltip your-custom-class" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
}); 

в вашем файле CSS: -

.your-custom-class {
 bottom: your value;
}

Убедитесь, что вы добавили шаблон в документацию к подсказке о загрузке, добавили свое имя класса и изменили его стиль с помощью css.

И вот оно. Вы можете найти больше об этом на https://getbootstrap.com/docs/4.0/components/tooltips/

Ответ 9

Возможно, вам не нужна эта логика для реагирования.

например.

placement: 'auto left'

Bootstrap 3 имеет автоматическое значение для размещения. Документ Bootstrap:

Если указано "auto", оно будет динамически переориентировать всплывающую подсказку. Например, если размещение "auto left", подсказка будет отображаться слева, когда это возможно, в противном случае она будет отображаться правильно.

Ответ 10

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

Итак, сначала вы должны изменить шаблон popover, чтобы добавить собственный класс css, чтобы не вступать в конфликт с другими popovers:

$(".trigger").popover({
  html: true,
  placement: 'bottom',
  trigger: 'click',
  template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

Затем, используя css, вы можете легко сдвинуть положение popover:

.popover.popover--topright {
  /* margin-top: 0px; // Use to change vertical position */
  margin-right: 40px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
  left: 88% !important; /* fix arrow position */
}

Это решение не будет влиять на другие поползоры, которые у вас есть. Такое же решение можно использовать и во всплывающих подсказках, потому что класс popover наследуется от класса всплывающей подсказки.

Вот простой jsFiddle