In Bootstrap 4, you can position the tooltip in various directions (left, right, top, bottom). The positioning of the tooltip is set by using the third-party library (Popper.js) before bootstrap.js in order for the tooltip to work.
Approach: The required markup for positing tooltip is on data-placement where you can set the tooltip to
- Bottom
- Right
- Top
- Left
CDN links: Include the following files in the head section of your HTML code.
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css”>
<script src=”https://code.jquery.com/jquery-3.6.0.slim.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” crossorigin=”anonymous”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js”> </script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js”></script>
The button is given a unique ID which is referred to in the jQuery code for initiating the tooltip. This jQuery code only initiates tooltip to display on hover as follow:
Syntax:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})Example 1: The following code demonstrates the above tooltip positioning using the data-placement attribute. The tooltip is associated with a button element. As you hover over the button, the tooltip displays in the default bottom position.
-
Tooltip Position Bottom
<div class="text-center"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" /> </div> -
Tooltip Position Top
<div class="text-center"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top" /> </div>
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href=
<script src=
</script>
<script
src=
crossorigin="anonymous">
</script>
<script src=
</script>
<script src=
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p><b>Tooltip tutorial</b></p>
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="top"
title="This is top tooltip">
Hover over me to see top tooltip
</button>
<br /><br />
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="bottom"
title="This is bottom Tooltip">
Hover over me to see bottom tooltip
</button>
</body>
</html>
|
Output:
Example: The following code demonstrates tooltip positioning at the right and left of the button.
-
Tooltip Position Left:
<div class="text-center"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left" /> </div> -
Tooltip Position Right:
<div class="text-center"> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right" /> </div>
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href=
<script src=
</script>
<script
src=
crossorigin="anonymous">
</script>
<script src=
</script>
<script src=
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<style>
.btn {
margin: 10px;
}
</style>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<p><b>Tooltip tutorial</b></p>
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="right"
x-placement="left"
title="This is left Tooltip">
Hover over me to see Right tooltip
</button>
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-placement="left"
x-placement="right"
title="This is right Tooltip">
Hover over me to see Left tooltip
</button>
</body>
</html>
|
Output:
You can learn all the other things about tooltip by following Bootstrap 4 Tooltip article.