Popover скрывается под навигационной панелью в Twitter Bootstrap

У меня есть кнопка помощи в моей навигационной панели с функциональностью popover.

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
           <div class="nav pull-right">
               <div class="cb_inline_block">               
                   <a class="btn btn-small cb_inline_block icon timezone_help" data-content="{% trans 'hahaha' %}" rel="popover" href="#" data-original-title="{% trans 'Time Zone' %}"><i class="icon-question-sign icon-large"></i></a>

JavaScript:

$(document).ready(function () { $('.timezone_help').click(show_timezone_help); };

function show_timezone_help(event){
    event.preventDefault();
    $('.timezone_help').popover('show');
}

Но когда я нажимаю на него, popover скрывается за навигационной панелью.

Нужно ли мне вручную устанавливать z-index? Это было бы больно. В сущности, я должен делать что-то неправильно. Спасибо.

Ответ 1

Во-первых, ответ на ваш вопрос заключается в том, что popovers не предназначены для использования в фиксированном навигаторе. В variables.less вы найдете следующий список z-индексов:

// Z-index master list
// -------------------------
// Used for a bird eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown:          1000;
@zindexPopover:           1010;
@zindexTooltip:           1030;
@zindexFixedNavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;

Как вы можете видеть, Popovers предназначены для скольжения под фиксированным навигатором. Однако вы заметите, что всплывающие подсказки не будут, и вы также можете использовать trigger: 'click' во всплывающих подсказках.

В противном случае, если вы набросились на popover, вам придется вручную изменить его z-index. Следующее активирует его и навсегда изменит его z-index, поэтому вам не придется беспокоиться о том, чтобы делать это каждый раз, когда он показывает, или что-то в этом роде:

$('.timezone_help')
  .popover({placement: "bottom"})
  .data('popover').tip()
    .css('z-index', 1030);

JSFiddle

Во-вторых, просто объяснение, почему мой пример, похоже, работал, в то время как ваш не сделал.

Значительная разница между нашими двумя примерами (mmfansler JSFiddle и houmie JSFiddle) на самом деле не была разница между 2.1.0 и 2.1.1. У обоих из них есть z-index: 1030 для фиксированных навигаторов и z-index: 1010 для popovers (вот что вы жалуетесь).

Реальная разница в том, что пример 2.1.0 также загружает отзывчивый код. По какой-то причине BootstrapCDN изменил соглашение об именах:

bootstrap.min.css в 2.1.0 была комбинированной версией
bootstrap.min.css в 2.1.1 только для невосприимчивых

Я подозреваю, что это ошибка, так как я пишу этот bootstrap-combination.min.css также не реагирующий!

В любом случае, единственное различие между двумя, которое влияет на отображение popover:

.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}

Это правило, однако, выполняется только для определенных медиа-запросов (что, конечно же, в JSFiddle активируется, так как область отображения рендера мала).

В противном случае, когда navbar не статичен, вы будете продолжать видеть всплывающие окна под навигационной панелью.

Возможно, вы захотите следить за BootstrapCDN Issue # 41

Ответ 2

В моем случае я решил следующее:

.navbar-fixed-top {
  z-index:1061;
}

Попущает по умолчанию индекс 1060, поэтому все, что выше 1060, расположено над Popovers

Сори за неправильный английский Я бразильский, и я использую Google Translate

Ответ 3

установите следующие свойства:

data-container="body" style="z-index:1000; position:relative"

z-index должен быть максимальным.

Ответ 4

Для меня мне нужно было установить контейнер моего popover в body и z-index

$().popover({container: 'body'})