Bootstrap 4 tooltips provide small pop-up messages that appear when users hover over or focus on an element.
Tooltips are useful for displaying additional information about an element without cluttering the UI.
What This Tutorial Covers:
- Basic Bootstrap 4 tooltip usage
- Tooltip positions
- Tooltip triggers (hover, click, focus)
- Customizing tooltip colors and styles
- Adding HTML content inside tooltips
- JavaScript methods to control tooltips
1. Basic Bootstrap 4 Tooltip
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Tooltip</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<button type="button" class="btn btn-primary" data-toggle="tooltip" title="This is a tooltip">
Hover over me
</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Explanation:
- The data-toggle=”tooltip” attribute activates the tooltip.
- title=”This is a tooltip” specifies the tooltip text.
- The JavaScript function initializes the tooltip on all elements with data-toggle=”tooltip”.
2. Tooltip Positions
Tooltips can be positioned top, bottom, left, or right using data-placement.
Example:
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Top
</button>
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Bottom
</button>
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Left
</button>
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Right
</button>
Explanation:
- data-placement=”top” places the tooltip above the button.
- data-placement=”bottom” places it below.
- data-placement=”left” and data-placement=”right” position it accordingly.
3. Tooltip Triggers
By default, tooltips appear on hover. You can change this behavior using data-trigger.
Available Triggers:
| Trigger | Description |
|---|---|
| hover | Default, shows on mouse hover |
| click | Shows when clicked |
| focus | Shows when element gains focus (useful for form inputs) |
| manual | Tooltip appears only when triggered via JavaScript |
Example: Click to Show Tooltip
<button class="btn btn-warning" data-toggle="tooltip" data-trigger="click" title="Click to see tooltip">
Click me
</button>
Example: Focus on Input Field
<input type="text" class="form-control" data-toggle="tooltip" data-trigger="focus" title="Enter your name">
Explanation:
- data-trigger=”click” makes the tooltip appear only when clicked.
- data-trigger=”focus” ensures tooltips appear when focusing on an input.
4. Customizing Tooltip Colors
Bootstrap 4 does not provide built-in styling for tooltip colors, but you can customize it using CSS.
Example: Custom Tooltip Background
<style>
.custom-tooltip .tooltip-inner {
background-color: #ff5733;
color: white;
font-size: 14px;
}
.custom-tooltip .arrow::before {
border-top-color: #ff5733 !important;
}
</style>
<button class="btn btn-dark custom-tooltip" data-toggle="tooltip" title="Custom styled tooltip">
Hover over me
</button>
Explanation:
- .tooltip-inner customizes the tooltip background color, text color, and font size.
- .arrow::before changes the tooltip arrow color.
5. Adding HTML Content Inside Tooltips
By default, tooltips support plain text only. To enable HTML inside tooltips, use data-html=”true”.
Example:
<button class="btn btn-info" data-toggle="tooltip" data-html="true" title="<b>Bold text</b> <br> New line">
Hover for HTML tooltip
</button>
Explanation:
- data-html=”true” allows formatting like <b>Bold text</b> and <br> for new lines.
6. Using JavaScript to Control Tooltips
You can manually show, hide, toggle, or destroy tooltips using JavaScript.
Example: Show and Hide Tooltip
<button id="showTooltip" class="btn btn-success">Show Tooltip</button>
<button id="hideTooltip" class="btn btn-danger">Hide Tooltip</button>
<button id="tooltipElement" class="btn btn-primary" data-toggle="tooltip" title="Tooltip controlled with JavaScript">
Tooltip Target
</button>
<script>
$(document).ready(function () {
$('#showTooltip').click(function () {
$('#tooltipElement').tooltip('show');
});
$('#hideTooltip').click(function () {
$('#tooltipElement').tooltip('hide');
});
});
</script>
Explanation:
- .tooltip(‘show’) manually displays the tooltip.
- .tooltip(‘hide’) hides the tooltip when clicked.
7. Initializing Tooltips for Dynamic Elements
If elements are dynamically added to the page, they need tooltips initialized manually.
Example:
<button id="addButton" class="btn btn-warning">Add Tooltip Button</button>
<div id="dynamicContainer"></div>
<script>
$(document).ready(function () {
$('#addButton').click(function () {
$('#dynamicContainer').append('<button class="btn btn-primary new-tooltip" data-toggle="tooltip" title="New Tooltip">New Button</button>');
$('.new-tooltip').tooltip();
});
});
</script>
Explanation:
- A new button with a tooltip is dynamically added to the page.
- .tooltip() initializes tooltips on the new element.
8. Tooltip Inside a Modal
Tooltips do not work inside Bootstrap modals by default because modals use z-index. The fix is to initialize tooltips when the modal is opened.
Example:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#tooltipModal">
Open Modal
</button>
<div class="modal fade" id="tooltipModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Tooltip in Modal</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<button class="btn btn-secondary" data-toggle="tooltip" title="Tooltip inside modal">
Hover here
</button>
</div>
</div>
</div>
</div>
<script>
$('#tooltipModal').on('shown.bs.modal', function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Explanation:
- Tooltips inside modals must be initialized when the modal is opened.
Conclusion
Bootstrap 4 tooltips enhance UX by displaying small pop-up messages on hover, click, or focus. They can be controlled dynamically using JavaScript.
