How to Position Tooltip in button using Bootstrap ?
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/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>
HTML
<!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>
HTML
<!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.
Last Updated :
18 Aug, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...