Как изменить непрозрачность всплывающей подсказки Bootstrap 4? - PullRequest
Новая
       1

Как изменить непрозрачность всплывающей подсказки Bootstrap 4?

0 голосов
/ 04 мая 2018

На что мне нужно нацелиться, чтобы изменить непрозрачность Bootstrap 4? Я обнаружил, что нужно настроить таргетинг на это, чтобы повлиять на его фон, но когда я добавляю непрозрачность: 1 к внутренней или всплывающей подсказке, он ничего не делает: 

.tooltip .tooltip-inner {
  background-color: #014379;
}

.tooltip .arrow:before {
  border-top-color: #014379;
}

Что мне нужно сделать, чтобы изменить его? Спасибо!

Ответы [ 4 ]

0 голосов
/ 04 мая 2018

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

.tooltip.show {
    opacity: 0.5;
}
0 голосов
/ 04 мая 2018

Непрозрачность имеет значение от 0 до 1. 1 - ничего не изменилось, а 0 - невидимо. 

.tooltip .tooltip-inner {
  background-color: #014379;
  opacity: 0.5;
}

.tooltip .arrow:before {
  border-top-color: #014379;
}
<html lang="en">
  <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
        Tooltip on bottom
    </button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
    </script>
  </body>
</html>
0 голосов
/ 04 мая 2018

Если вы хотите изменить непрозрачность цвета фона, вы можете использовать rgba () хотя он не будет работать с цветами HEX, если вы не используете SCSS это означает, что если вы хотите это решение, вам нужно найти цвет, который выглядит как #014379, но с rgb ()

RGBA Пример: 

/*Instead of 
background-color: #014379;
*/
background-color:rgba(XXX,XXX,XXX,0.5)

SCSS Пример:

Переменная SCSS: 

$color-tertiary: #607D8B;

Изменение непрозрачности: 

background-color: rgba($color-tertiary, 0.5);
0 голосов
/ 04 мая 2018

Если вы уже пробовали этот код 

.tooltip.show /* The CSS classes that the tooltip has */ {
    opacity: 0.5; /* or whatever */
}

Затем попробуйте добавить !important, чтобы вы могли быть уверены, что ваш стиль будет применен 

opacity: 0.5 !important;

Если это все еще не работает, не стесняйтесь, сообщите мне.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...