How to Position Tooltip in button using Bootstrap ?
Last Updated :
18 Aug, 2021
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
CDN links: Include the following files in the head section of your HTML code.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/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>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/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>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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.