On Twitter Bootstrap 3, when you look at the Tooltip it appears like the one below.
When I tried doing it. This is how the tooltip appears.
This is the code I used.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Update
This is my JS code
$('#tooltip1').tooltip('options')
On Twitter Bootstrap 3, when you look at the Tooltip it appears like the one below.
When I tried doing it. This is how the tooltip appears.
This is the code I used.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Update
This is my JS code
$('#tooltip1').tooltip('options')
3 Answers
Reset to default 11You need to put the Tooltip on left in data-original-title="Tooltip on left" and id="tooltip1" to match your script.
<button id="tooltip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left">
Tooltip on left
</button>
It was not working because your script references an id that you did not have and 'option' as a string. options should be blank or something like 'show' or 'hide' but in your case it will work blank.
change:
$('#tooltip1').tooltip('options')
to:
$('#tooltip1').tooltip();
be sure to include the semi-colon.
UPDATE: Here is a simple example
<html lang="en">
<head>
<title>
Bootstrap Tool-Tip preview
</title>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-6">
<button data-original-title="Tooltip on left" data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" id="tooltip1">
Tooltip on left
</button>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script id="bsJs" type="text/javascript">
$(document).ready(function() {
$('#tooltip1').tooltip();
});
</script>
</body>
</html>
See Example: bootply
You need the "data-placement" with value "left"
<button type="button" class="btn btn-default" data-placement="left" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Remember to load the tooltip to all the place with data-toggle="tooltip", you need write with jQuery before of close the this sentence :
<script type="text/javascript">
$(document).ready(function() {
// Tooltip
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I couldn't get this to work for me either until I changed the $ to jQuery. Once I changed it, the default bootstrap tooltip showed properly for me. So do this in your Javascript:
<script type="text/javascript">
jQuery(document).ready(function() {
// Tooltip
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>
I hope that helps someone out!
$('#example').tooltip(options)– Olrac Commented Oct 14, 2013 at 3:19]$(function () { $('[data-toggle="tooltip"]').tooltip() }). – Alexei Zababurin Commented Oct 25, 2015 at 15:37