Bootstrap change tooltip content on click
Bootstrap change tooltip content on click jQuery– We can change tooltip content such as title on click event using jQuery. Here in this article we are going to create one example to dynamically change the tooltip content.
Bootstrap change tooltip content on click jQuery Example
You can change the title of tooltip in bootstrap using jQuery Simply as below –
Bootstrap change tooltip Title on click:
<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">
<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'
});
$('[data-toggle="tooltip"]').click(function(){
$(this).tooltip('hide').attr('data-original-title', 'New Title Added').tooltip('show');
});
});
</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><a href="#" data-toggle="tooltip" data-original-title="Default Settings tooltip on top">Click To Change Title</a></li>
</ul>
</div>
</body>
</html>
|
If you run the above example it will produce output something like this –
Advertisements
