Menu
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>
326
How to position the tooltip - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second.
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" . CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip.
How To Create a Tooltip. To create a tooltip, add the data-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.
The reason data-placement="right" is not taking affect is that Bootstrap's tooltip only considers the value of data-placement when it's initialized, which is on page load in your case. So even if you change the value of data-placement later programmatically (using Javascript, jQuery or AngularJS), it won't reflect this change on the tooltip itself.
Bootstrap Tooltip Plugin. The Tooltip Plugin. The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element: Tip: Plugins can be included individually (using Bootstrap's individual "tooltip.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").
And if you inspect the HTML, you'll see this data-placement="right", which means it's rendered correctly by AngularJS. The reason data-placement="right" is not taking affect is that Bootstrap's tooltip only considers the value of data-placement when it's initialized, which is on page load in your case.
To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element. Use the title attribute to specify the text that should be displayed inside the tooltip: Note: Tooltips must be initialized with JavaScript to work. By default, the tooltip will appear on top of the element.
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 !
127
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
