Удалить прозрачность из всплывающей подсказки

Стандартный .tooltip из twitter bootstrap имеет прозрачность, которую я хотел бы удалить.

Этот мой HTML:

<a href="#" class="btn
btn-info" 
style="margin:10px;" 
data-toggle="tooltip" 
data-placement="bottom" 
data-html="true"
title="MERKNAD 1 Denne klassifiseringen er i henhold til NS-EN 13501-2. <br /><br /> MERKNAD 2 Valgene 11-16 gjelder bærende konstruksjoner, valgene 21-24 gjelder kun integritet, valgene 31-37 gjelder både integritet og isolasjon, valgene 41-46 gjelder bærende skiller konstruksjoner med isolasjonskrav, og valgene 51-54 gjelder seksjoneringsvegger og dekker.">Hover</a>

CSS:

.tooltip > .tooltip-inner {
    border: 1px solid;
    padding: 10px;
    max-width: 450px;
    color: black;
    text-align: left;
    background-color: white;
    background: white;
    opacity: 1.0;
    filter: alpha(opacity=100);
}
.tooltip > .tooltip-arrow {
    border-bottom-color: black;
}

Также я сделал JSFiddle, чтобы проиллюстрировать здесь: https://jsfiddle.net/fiddlejan/xpwhknja/

Если вы наведите курсор мыши на кнопку, вы увидите, как прозрачный текст всплывающей подсказки также показывает текст внизу.

Я пробовал:

opacity: 1.0;
filter: alpha(opacity=100);

Но он не работает...

Ответы

Ответ 1

Добавить .tooltip.in{opacity:1!important;} в css..По умолчанию это 0.9, почему фон является прозрачным jsfiddle

Ответ 2

Добавьте в свой класс .tooltip также непрозрачность 1, но с флагом important. См. Обновленный Fiddle

И в вашей скрипке вы подключили bootstrap.min.css прямо в html. Поэтому на вашем сайте вы можете написать

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

без !important, и он будет работать. Но в скрипке это не работает, потому что вы не использовали для этого css External Resources

Потому что в вашем bootstrap.css у вас есть

.tooltip.in{filter:alpha(opacity=90);opacity:.9}

Ответ 3

Пожалуйста, используйте! важно для непрозрачности -

.tooltip > .tooltip-inner {
  border: 1px solid;
  padding: 10px;
  max-width: 450px;
  color: black;
  text-align: left;
  background-color: white;
  background: white;

  opacity: 1.0;
  filter: alpha(opacity=100);
} 

.tooltip > .tooltip-arrow { border-bottom-color:black; }

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

Ответ 4

Добавьте этот класс:

.tooltip.in {
    opacity: 1 !important;
}

Ответ 5

Вам нужно быть конкретным, поскольку точный вызов - это два класса в одном элементе

    .tooltip.in{
opacity: 0.9;
}

в boostrap.min.css

Так просто переопределить с непрозрачностью 1;

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