bootstrap popover не отображается поверх всех элементов
Я работаю на сайте bootstrap, и после обновления до bootstrap 2.2 из 2.0 все работало, кроме popover.
всплывающие окна по-прежнему отображаются нормально, но они не отображаются поверх всех других элементов.
<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
<div> //popover shows on top of this
<div> //popover shows on top of this
//link here with popover in it.
</div>
</div>
</div>
кто-нибудь имеет представление о том, почему поведение popover изменилось, или как я могу это исправить? Спасибо.
12 ответов
я смог решить проблему, установив data-container="body"
на элементе html
HTML
пример:
<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
hover over me
</a>
JavaScript
пример:
$('your element').tooltip({ container: 'body' })
обнаружено по этой ссылке:https://github.com/twitter/bootstrap/issues/5889
У меня просто была ситуация, похожая на эту, с участием библиотеки DataTables JQuery с включенной прокруткой.
то, что оказалось, не имело ничего общего с Z-индексами, но с одним из заключенных divs, имеющим свойство переполнения CSS, установленное как скрытое.
я исправил это, добавив событие к моему элементу, вызывающему popover, который также изменил свойство overflow ответственного div на visible.
наиболее вероятной причиной является то, что содержимое, отображаемое над popover, имеет более высокий z-index
. Без точного кода/стиля, я могу предложить два варианта :
вы должны попробовать определить точные элементы с помощью веб-инспектора (обычно F12 в вашем любимом браузере) и проверить их фактические z-index
.
если вы найдете это значение, вы можете установить его ниже, чем popover что это z-index: 1010;
по умолчанию
или другой подход, не такой хороший, был бы увеличить z-index
в всплывающем окне. Вы можете сделать это либо с @zindexPopover
в меньшем количестве файлов или непосредственно путем переопределения
.popover {
z-index: 1010; /* A value higher than 1010 that solves the problem */
}
если вы не можете найти решение, вы должны попробовать воспроизвести баг в что-то вроде этот jsfiddle - вы, вероятно, решить эту проблему при попытке получить ошибку.
У меня была аналогичная проблема с 2 фиксированными элементами-хотя наследственность Z-индекса была правильной, подсказка bootstrap была скрыта за одним элементом с более низким Z-индексом.
добавлять data-container="body"
решен вопрос и теперь работает, как ожидалось.
Если data-container= "body" не работает, попробуйте другие два свойства:
data-container="body" style="z-index:1000; position:relative"
Z-индекс должен быть максимальный предел.
<div class="testDiv">
<a tabindex = "-1" id="testPop" title="stuff" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-container=".testDiv">
<i class="fa fa-info-circle"></i>
</a>
</div>
выше ответы были полезны, поскольку установка значения в контейнере данных выполнила эту работу, но если я установил data-container= "body", то он не выравнивается должным образом в моем случае. Поэтому я указал класс родительского div popover, и он работал нормально.
HTML-код
Data-container=".testDiv"
js
$("#testPop").popover ({container:'.testDiv'})
Это лучшее решение если вы используете angular uib-bootsrap - использовать инъекцию зависимостей для $uibTooltipProvider, вы можете изменить поведение всплывающих подсказок и всплывающих подсказок по умолчанию для всех подсказок.
$uibTooltipProvider.options({
appendToBody: true
});
$uibTooltipProvider С помощью $uibTooltipProvider вы можете изменить поведение всплывающих подсказок и всплывающих окон по умолчанию; атрибуты выше всегда имеют приоритет. Следующие методы доступно:
setTriggers(obj) (пример: { 'openTrigger': 'closeTrigger'}) - расширяет сопоставления триггеров по умолчанию, упомянутые выше, с собственными сопоставлениями.
опции(obj) - укажите набор значений по умолчанию для определенных атрибутов всплывающих подсказок и всплывающих подсказок. В настоящее время поддерживает, кто знаком с.
просто используя
$().popover({container: 'body'})
может быть недостаточно при отображении popover над модальным BootstrapDialog, который также использует тело в качестве контейнера и имеет более высокий Z-индекс.
Я пришел с этим исправлением, которое использует внутренние части Bootstrap3 (может не работать с 2.x / 4.x)но большинство современных установок Bootstrap - это 3.x.
self.$anchor.on('shown.bs.popover', function(ev) {
var tipCSS = self.$anchor.data('tipCSS');
if (tipCSS !== undefined) {
self.$anchor.data('bs.popover').$tip.css(tipCSS);
}
// ...
});
таким образом, разные popovers могут иметь разный z-индекс, некоторые из них находятся под BootstrapDialog modal, а другие-над ним.
в моем случае мне пришлось использовать опцию шаблона popover и добавить свой собственный класс css в шаблон html:
$("[data-toggle='popover']").popover(
{
container: 'body',
template: '<div class="popover top-modal" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
Css:
.top-modal {
z-index: 99999;
}
Problem solved with data-container="body" and z-index
1->
<div class="button btn-align"
data-container="body"
data-toggle="popover"
data-placement="top"
title="Top"
data-trigger="hover"
data-title-backcolor="#fff"
data-content="A top aligned popover is a really boring thing in the real
life.">Top</div>
2->
.ggpopover.in {
z-index: 9999 !important;
}
Это может быть связано с главным списком Z-индексов по переменным.меньше. В общем, убедитесь, что ваши переменные.less файл является правильным и актуальным.