Подсказка по стилю с помощью Bootstrap v3.0.2

Question

Подсказка по стилю с помощью Bootstrap v3.0.2

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

Теперь это выглядит так:

Мой код следующий:

    $(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
      });

   .tooltip .tooltip-inner {
        max-width: 200px;
        padding: 1px 3px;
        color: #fff;
        text-align: center;
        background-color: #000;
        border-radius: 3px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
     
        <span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="top" title="Remove"></span>

Я пытался изменить это таким образом, но без изменений:

.remove-file .tooltip .tooltip-inner {background-color: black !important;}

2

css twitter-bootstrap tooltip

Источник

user4741532 05 сен '16 в 08:52

2 ответа

Другие вопросы по тегам css twitter-bootstrap tooltip

user5933595 05 сен '16 в 09:54 2016-09-05 09:54 · Answer 1 · 2016-09-05 09:54

Сначала вам нужно поместить ваш внешний CSS-файл ниже CSS-файла начальной загрузки, затем он переопределит CSS по умолчанию, а затем вам просто нужно изменить цвет в классе следующим образом:

  .tooltip-inner{
     background:red;
    }

0

Источник

user5933595 05 сен '16 в 09:54

user2690160 05 сен '16 в 09:39 2016-09-05 09:39 · Answer 2 · 2016-09-05 09:39

Это работает хорошо, см. Демо.

$(document).ready(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

.tooltip .tooltip-inner {
   
    max-width: 200px;
    padding: 1px 3px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 3px;
}

.remove-file {
  display: block;
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
 

    <span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="right" title="This is Working correctly"></span>