bootstrap tooltip not considering data-placement parameter
Question
I have added bootstrap tooltip parameters as follows on my element :
<input type="text" name="appbundle" data-toggle="tooltip" data-placement="top" title="My title" class="form-control">
I also have added the following script :
$('[data-toggle="tooltip"]').tooltip();
Well, the tooltip is displaying but it is not respecting the data-placement parameter : it's always at the bottom of the control.
I have seen there was some issues with positioning but all i found was from long ago and I have now bootstrap 3.3.1.
Any clue on how to resolve this ?
Edit: Here is a sample code with the same librairies I am using. Still not working
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="vendor/bootstrap-3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="vendor/bootstrap-3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/jquery-ui-1.11.2/jquery-ui.min.css">
<link rel="stylesheet" href="vendor/jquery-ui-1.11.2/jquery-ui.structure.min.css">
<link rel="stylesheet" href="vendor/jquery-ui-1.11.2/jquery-ui.theme.min.css">
</head>
<body>
<script src="vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
<script src="vendor/bootstrap-3.3.1/js/npm.js"></script>
<script src="vendor/jquery/jquery-2.1.1.min.js"></script>
<script src="vendor/jquery-ui-1.11.2/jquery-ui.min.js"></script>
<p>test</p>
<br>
<input type="text" name="appbundle" data-toggle="tooltip" data-placement="top" title="My title" class="form-control">
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
3 answers
solution1
23 ACCPTED 2014-12-03 00:07:46
Found it!
I was adding bootstrap js before jquery ui and that caused the issue. The same went for some other libraries.
Place bootstrap js at the end !
solution2
4 2020-04-15 08:33:35
In my case, the problem came from overflow style.
In this example, when I set overflow: auto for the .container1 element, the tooltip message will be shown wrong.
Since I remove it from .container2 , the problem is fixed.
$(document).ready(function () { $('[data-toggle="tooltip"]').tooltip().tooltip('show'); });
[class^=container] { margin: 50px; height: 30px; } .container1 { overflow: auto; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <div class="container1"> <button type="button" data-toggle="tooltip" data-placement="top" title="This is a title">Hover me</button> </div> <div class="container2"> <button type="button" data-toggle="tooltip" data-placement="top" title="This is a title">Hover me</button> </div>
solution3
1 2017-01-13 08:43:57
Use this order of your jquery and bootstrap js files
<script type="text/javascript" src="js/jquery-ui.js"></script> <script src="js/bootstrap.min.js" ></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.