Bootstrap v3.0.2を使用したスタイリングツールチップ

Question

私は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;}

Answer 1

これはデモを参照してください、うまく機能しています。

$(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>

Answer 2

あなたは、あなたが同じようにクラスの色の変更を加える必要があり、それはデフォルトのCSSを上書きするブートストラップのCSSファイルの下、あなたの外部CSSファイルを配置する必要がありまず：

.tooltip-inner{ 
    background:red; 
    }