bootstrap tooltip not considering data-placement parameter
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>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 !
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/[email protected]/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>