Setting different attributes to tooltips

Question

I am giving different settings for tool tips. It's not working.

    .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>

I am setting the background of 'hi there' to blue, but not working. What's wrong?

The code you provided is incomplete. `.tooltip-inner` doesn't exist in the HTML you provided either. Can you post the rest of the code (either the JS or CSS that controls the rest of the tooltips)? I'm fairly certain what the issue is, but don't want to post an answer until I'm sure what the markup is. — Xhynk, Mar 06 '18 at 05:55
@Gene9y `.tooltip-inner` this selector doesn't exist in your code. — Anzil khaN, Mar 06 '18 at 06:22
Check this https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color — omukiguy, Mar 06 '18 at 06:48
Possible duplicate of [Change bootstrap tooltip color](https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color) — omukiguy, Mar 06 '18 at 06:48

score 1 · Answer 1 · answered Mar 06 '18 at 06:44

You can try this

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

Setting different attributes to tooltips

1 Answers1