Вопрос по twitter-bootstrap, css, javascript – загрузочный поповер: расширенное позиционирование

50

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

К сожалению, «размещение»: «снизу»; позиционирования недостаточно, так как он будет центрировать его под спусковым крючком.

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

Советы?

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

Ваш Ответ

10   ответов
32

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

.popover {
    top: 71px !important;
    left: 379px !important;
}
thanks, важно, что перезаписывает встроенные стили. koichirose
Это не решение, потому что на странице может быть много всплывающих окон. Rootical V.
Затем все, что вам нужно сделать, это изменить свой селектор rboarman
Это ужасное решение - вы жестко программируете значения положения в поповере, размеры и положение которого являются динамическими. Я просто попытался добавить этот стиль в инструментах разработчика на Getbootstrap.com / JavaScript / # Popovers и неудивительно, что это не сработало. jbyrd
не могу поверить, что это принятый ответ: S D Ie
17
Простое решение

Fiddle

Видеть моя скрипка если ты спешишь

Основная цел

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

Обратите внимание, что мы не хотим настраивать все всплывающие окна! Это ужасная идея (по сути, на сегодняшний день принятый ответ - УЖАСНАЯ идея ..)

Приме

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

html:

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

js:

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

css:

#my-popover {
    left: -169px!important;
}

#my-popover .arrow {
    left: 90%
}
Что заtip функция в вашем коде? Buksy
13

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

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

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

Ваш плагин уничтожает библиотеки MVVM, как нокаут, потому что он отсоединяет элемент от тела tbe Anders
Это сработало очень хорошо. Благодарность baxang
@ Pantera61: какую часть кода я должен взломать, чтобы обнаружить столкновение между двумя всплывающими окнами? то есть, когда 2 соседних всплывающих окна частично перекрываются, я хочу динамически менять их расположение, чтобы они были удалены друг от друга. user
9
Popover's Viewport

которое будет работать для вас во всех случаях, особенно если ваш веб-сайт имеет плавную ширину, это использовать Окно просмотр вариант 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;
}
Это должен был быть принятый ответ doc_id
Это, безусловно, лучший ответ. Настройкаviewport является ключом к решению этой проблемы. Дополнительные css - это личные предпочтения Jonathon Hibbard
Знаете ли вы, как переместить всплывающую подсказку влево или вправо во всплывающем окне начальной загрузки, используя приведенный выше код, если да, то можете ли вы поделиться скриптом js agent47
Это зависит от выбора контейнера, который вы используете для области просмотра. в приведенном выше примере, если вы удалите text-align: right из .container, подсказка будет иметь другое направление Datsos
7

добавив несколько строк кода в библиотеку начальной загрузки css. Вам придется изменить tooltip.js, tooltip.less, popover.js и popover.less

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

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

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

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

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

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

нота если вы хотите, чтобы всплывающее окно находилось в верхнем левом углу, используйте атрибут top .top и атрибут left .left.

4

Для загрузки 3.0.0:

.popover{ right:0!important; }

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

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

Где WWW - ваша максимальная ширина для показа вашего поповера.

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

чтобы всплывающее окно расположилось ниже с некоторым перекрытием и правильно отображать стрелку.

JS

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

@ C

    .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;  
    }  

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

Стрелка такая маленькая - едва заметная. Как я могу сделать это больше? Michael R. Hines
1

есть чистый способ сделать это, и он также есть в документации всплывающего окна / всплывающей подсказки 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

0

Например

placement: 'auto left'

@Bootstrap 3 естьавт значение для Размещение. Bootstrap doc:

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

Есть много случаев, когда это не работает. Hippyjim
0

исходные коды bootstrap, вы заметите, что позиция может быть изменена с помощью поля.

Итак, сначала вы должны изменить шаблон 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--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

Похожие вопросы