Щелкать всплывающей подсказкой и всплывающей подсказкой

Я пытаюсь принять решение о всплывающей подсказке или popover.. или использовать оба в зависимости от необходимости. Вот проблема.

У меня есть загрузочная верхняя панель навигации на моем сайте. Сайт белый, а навигация - темно-синий.

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

Итак, я думаю, что это двойной вопрос, если я хочу использовать оба. Как снять непрозрачность всплывающей подсказки и навести курсор на верхнюю панель. Возможность выбора обоих вариантов была бы идеальной.

Ответы

Ответ 1

Оба этих изменения могут быть решены с помощью немного CSS. Я рекомендую вам напрямую не модифицировать CSS Bootstrap Twitter, а вместо этого ссылаться на другую таблицу стилей. Обязательно включите эту новую таблицу стилей после включения таблицы стилей Bootstrap, чтобы она перекрывала CSS Bootstrap. На момент написания самой последней версии Bootstrap было 2.1.1, поэтому все комментарии основаны на этом предположении.

Для подсказки

Эффект всплывающей подсказки определяется в правиле .tooltip.in в строке 5003 следующим образом:

.tooltip.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

Чтобы удалить эффект, вставьте в свою новую таблицу стилей следующее:

.tooltip.in {
  opacity: 1;
  filter: alpha(opacity=100);
}

Для Popover

В Интернете один объект помещается под другой из-за более низкого z-индекса. Z-индекс popover определен в строке 5080 следующим образом:

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  ...
}

Однако в этой версии Bootstrap по умолчанию (статический) навигатор не имеет явного набора z-index, поэтому по умолчанию он равен 0. Так как это так, popover уже должен быть поверх навигационной панели. Если вы используете более старую версию Bootstrap, вы можете исправить это, найдя z-индекс навигационной панели и установив z-индекс popover на большее число. Вы можете сделать это, добавив следующий код в новую таблицу стилей:

.popover {
  z-index: ###;
}

Ответ 2

Это зависит от того, какую версию загрузочного буфера вы используете, но непрозрачность будет установлена ​​в файле bootstrap.css. (Я смотрю v2.0.1)

Единственный параметр непрозрачности, который я могу видеть в файле bootstrap.css, находится в строке 2963:

.tooltip.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

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

Что касается плавания под навигационной панелью, это будет связано с ним z-index относительно навигационной панели. z-index popover установлен в строке 2857:

.modal-open .popover {
  z-index: 2060;
}

Итак, вы можете изменить это на z-index выше, чем для статического навигатора.

Надеюсь, что это поможет.