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
- 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>
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.
Please Login to comment...