Bootstrap Change Tooltip Background Color
Bootstrap Change Tooltip Background Color: Sometimes we need to change the tooltip background color in Bootstrap. There are many ways to do this, You can create your own class to change the background color of the Bootstrap tooltip background Color. Here in this tutorial we are going to explain how you can change background color of tooltip color. You can also use our online editor to edit and run the code online.
Bootstrap Change Tooltip Background Color Example
You can change the Tooltip background color in Bootstrap simply as below –
Chanage Tooltip Text Color & Background Color
In the below example we changed the tooltip background color as well as the text color.
Bootstrap Change Tooltip Background Color Example:
<html>
<head>
<title>Bootstrap Grid</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
placement : 'top'
});
});
</script>
<style type="text/css">
.myTooltip .tooltip > .tooltip-inner{
background:yellow;
color:#000;
}
</style>
</head>
<body>
<div class="container" style="padding:100px;">
<ul class="list-inline">
<li class="myTooltip"><a href="#" data-toggle="tooltip" data-original-title="Default Home tooltip on top">Home</a></li>
<li><a href="#" data-toggle="tooltip" data-original-title="Default Settings tooltip on top">Settings</a></li>
</ul>
</div>
</body>
</html>
|
If you run the above example it will produce the output something like this –
Advertisements
