css - 为工具提示设置不同的属性

Question

我为工具提示提供了不同的设置。它不工作。

    .hi .tooltip-inner {
        background: #00f;
    }

    <div class="hi">
        <a class="tooltips" data-placement="bottom" data-container="body" data-original-title="Hi there" href="#">Hi there</a>
    </div>
        <div class="hello">
        <a class="tooltips" data-placement="bottom" data-container="body" data-original-title="Hello" href="#">Hello</a>
    </div>

我将“hi there”的背景设置为蓝色，但不起作用。怎么了？

Answer 1

你可以试试这个

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

.blue-tooltip  + .tooltip > .tooltip-inner {background-color: #00f;}
.blue-tooltip  + .tooltip > .tooltip-arrow { border-bottom-color:#00f; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="hi">
     	<a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Hi there" class="tooltips blue-tooltip">Hi there</a>
	</div>
    <div class="hello">
    	<a class="tooltips" data-placement="bottom"  data-toggle="tooltip"  data-original-title="Hello" href="#">Hello</a>
	</div>
</div>