how to customize tooltip in bootstrap 4 [duplicate] - css

Question

This question already has answers here:
Styling a tooltip (popper.js / bootstrap v4 beta)
(2 answers)
Closed 5 years ago.
Am using Bootstrap '4.0.0-alpha.6' and Im trying to update tooltip styles to customize it. Right now, Im using Bootstrap 4 and also, I added some custom css class also. But it is not responding as per my custom style while mouse hover.
HTML
<span data-toggle="tooltip" data-placement="top" title="Testing tooltip with custom style" class="red-tooltip" (click)="nodeion(node)">
some text
</span>
CSS
.red-tooltip + .tooltip-top > .tooltip-inner {
background-color: #f00;
padding: 10px;
font-size: 14px;
}
but, after this update, it is reflected as per the change, it is stil showing default style of bootstrap.
Any help, please?

Answer 1

// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#f2f2f2 !important;border-radius:.25rem}
<title>My Example</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
body {
padding-top: 1em;
}
</style> <div class="container-fluid">
<p style="margin:40px;">Check out my <a target="_blank" href="https://www.quackit.com/css/grid/tutorial/" data-toggle="tooltip" data-placement="top" title="Build advanced layouts easily with CSS!">Grid tutorial</a>, as you never know when you might need it!</p>
</div>
<span data-toggle="tooltip" class="red-tooltip" data-placement="top" title="Testing tooltip with custom style" class="red-tooltip" (click)="nodeion(node)">some text</span>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Answer 2

You need the general sibling ~ selector here, since the generated tooltip element isn't a direct sibling + of your .red-tooltip:
.red-tooltip ~ .tooltip > .tooltip-inner
In SCSS it would be:
.red-tooltip {
&~.tooltip {
&>.tooltip-inner {
/* your custom styles */
}
}
}
See this working example:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
body {
padding: 5em;
}
.red-tooltip ~ .tooltip > .tooltip-inner {
background-color: #f00;
padding: 10px;
font-size: 14px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<span data-toggle="tooltip" data-placement="top" title="Testing tooltip with custom style" class="red-tooltip" (click)="nodeion(node)">some text</span>