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

стандартные .всплывающая подсказка из 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);

но это, кажется, не работает...

11
css html jquery twitter-bootstrap twitter-bootstrap-tooltip

7 ответов

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

17

добавить в .tooltip класс укрывистости 1, но с флагом important. Смотрите раздел updated Скрипка

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

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

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

это потому, что в вашем бутстрапе.css у вас есть

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

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

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

Bootstrap v4.0:

.tooltip.show {
    opacity: 1;
}
2

добавить этот класс :

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

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

    .tooltip.in{
opacity: 0.9;
}

в boostrap.минута.в CSS

поэтому просто переопределите с непрозрачностью 1;

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

1

когда мне нужно было уменьшить прозрачность подсказки, предоставленной ngbTooltip это то, что я добавил в свой файл CSS.

Примечание: я использую Bootstrap v4

::ng-deep .tooltip.show {
    opacity: 1!important;
}
0