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

Стандартный .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);

Но, похоже, это не работает...


html jquery css twitter-bootstrap twitter-bootstrap-tooltip
person ganjan    schedule 29.01.2016    source источник
comment
@A.Wolff Это для меня в Chrome   -  person Rory McCrossan    schedule 29.01.2016
comment
для меня в Firefox также.   -  person ketan    schedule 29.01.2016
comment
@A.Wolff Это очень небольшая прозрачность. Если ты присмотришься, то увидишь   -  person NiallMitch14    schedule 29.01.2016
comment
О, ребята, вы правы. В настоящее время я тестирую его на ноутбуке с солнцем в глазах ... Плохо, извините!   -  person A. Wolff    schedule 29.01.2016

Ответы (8)


arrow_upward
27
arrow_downward

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

person Dhara    schedule 29.01.2016

arrow_upward
17
arrow_downward

Начальная загрузка v4.0:

.tooltip.show {
    opacity: 1;
}
person galengodis    schedule 10.04.2018

arrow_upward
10
arrow_downward

Добавьте к вашему классу .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}
person Narek-T    schedule 29.01.2016
comment
Вы должны использовать любое более конкретное правило вместо использования оператора !important - person A. Wolff; 29.01.2016
comment
Конечно, вы можете переопределить его с помощью селектора родительского элемента, а не !important - person ShaneQful; 29.01.2016
comment
@A.Wolff, @ShaneQful, вы правы. Но обратите внимание, автор темы размещал ссылки непосредственно на <html> в JSFiddle. Если подключить эти стили нормально, с external resources, то нет необходимости в '!important'. - person Narek-T; 29.01.2016

arrow_upward
3
arrow_downward

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

.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);
}
person Govind jha    schedule 29.01.2016

arrow_upward
3
arrow_downward

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

Примечание. Я использовал Bootstrap v4.

::ng-deep .tooltip.show {
    opacity: 1!important;
}
person Steffi Keran Rani J    schedule 27.09.2018

arrow_upward
1
arrow_downward

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

.tooltip.in {
    opacity: 1 !important;
}
person sanjeev jha    schedule 29.01.2016

arrow_upward
1
arrow_downward

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

    .tooltip.in{
opacity: 0.9;
}

в boostrap.min.css

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

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

person Jamie Paterson    schedule 29.01.2016
comment
Да, body .tooltip.in{ opacity: 1; } исправляет это - person A. Wolff; 29.01.2016

arrow_upward
1
arrow_downward

Если вы используете SCSS и Bootstrap 4, вы можете просто переопределить переменную $tooltip-opacity следующим образом:

$tooltip-opacity: 1;
person Matt    schedule 26.08.2020