Tooltip
Bootstrap tooltips provide an elegant and interactive way to display additional information to users. They are small popovers that appear when users hover, focus on, or tap an element. Tooltips are useful for adding context or extra information to elements without cluttering the UI.
Implementing Basic Tooltips
<button type=”button” class=”btn btn-secondary” data-toggle=”tooltip” data-placement=”top” title=”Tooltip on top”>
Hover over me
</button>
<script>
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip(); // Initialize tooltips
});
</script>
Explanation:
– The button is equipped with a tooltip through the `data-toggle=”tooltip”` attribute.
– The `data-placement` attribute specifies where the tooltip appears relative to the element (`top`, `bottom`, `left`, `right`).
– The `title` attribute contains the text to be displayed in the tooltip.
– Tooltips are initialized with jQuery: `$(‘[data-toggle=”tooltip”]’).tooltip()`. This is necessary for tooltips to function.
Advanced Tooltips with HTML Content
<a href=”#” data-toggle=”tooltip” data-html=”true” title=”<em>Formatted</em> <u>text</u> <b>here</b>”>
Hover over me
</a>
<script>
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip(); // Initialize tooltips
});
</script>
Explanation:
– This example demonstrates a tooltip with HTML-formatted content.
– The `data-html=”true”` attribute allows HTML tags to be included in the `title` attribute, enabling more complex tooltip content.
– Similar to the previous example, the tooltip is initialized with jQuery.
Customizing Tooltips
Changing Tooltip Colors
CSS for Custom Tooltip Colors:
css
.tooltip.custom-tooltip .tooltip-inner {
background-color: #5cb85c; /* Green background */
color: #fff; /* White text */
}
.tooltip.custom-tooltip .arrow::before {
border-top-color: #5cb85c; /* Arrow color for ‘top’ placement */
}
<button type=”button” class=”btn btn-default” data-toggle=”tooltip” data-placement=”top” title=”Custom color tooltip” data-template='<div class=”tooltip custom-tooltip” role=”tooltip”><div class=”arrow”></div><div class=”tooltip-inner”></div></div>’>
Hover over me
</button>
<script>
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip(); // Initialize tooltips
});
</script>
Explanation:
– Custom CSS classes (`custom-tooltip`) are defined to change the background and text color of the tooltip.
– The `data-template` attribute is used to apply these custom classes to the tooltip.
Tooltips with Delayed Show/Hide
<button type=”button” class=”btn btn-info” data-toggle=”tooltip” data-placement=”right” title=”I take time to show” data-delay='{“show”:”500″, “hide”:”100″}’>
Hover over me
</button>
<script>
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip(); // Initialize tooltips
});
</script>
Explanation:
– The `data-delay` attribute allows setting a delay in milliseconds for the tooltip’s show and hide actions.
– In this example, the tooltip will take half a second (500ms) to appear and a tenth of a second (100ms) to disappear after the cursor moves away.
Bootstrap tooltips are a versatile component that can be customized extensively to fit the design and interaction requirements of a website or application. They provide a user-friendly way to present additional information without adding clutter to the interface.
YouTube Reference :
A Bootstrap tooltip is a small pop-up box that displays additional information when a user hovers over or focuses on an element.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Add the data-bs-toggle="tooltip" attribute to an element and initialize it using Bootstrap’s JavaScript or jQuery.
Yes, tooltips can be customized with custom CSS or JavaScript for different styles and behaviors.
Examples include tooltips with different positions (top, right, bottom, left), dynamic tooltips, and styled tooltips.
Yes, Bootstrap tooltips are responsive and adapt to different screen sizes.
Use JavaScript methods like bootstrap.Tooltip.getInstance(element) to control tooltip behavior.
Tooltips provide short, contextual information, while popovers are more complex and can contain additional HTML elements.
Yes, you can enable HTML in tooltips by setting the data-bs-html="true" attribute.
Customize tooltips using CSS or by overriding Bootstrap’s default styles with custom classes.
