Tooltip component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a tooltip in web development?

A tooltip is a small pop-up box that appears when a user hovers over or focuses on an element. It shows extra information about that element.

beginner

How do you enable a tooltip in Bootstrap 5?

You add the attribute data-bs-toggle="tooltip" to an element and initialize tooltips with JavaScript using var tooltip = new bootstrap.Tooltip(element);.

beginner

Which event triggers a Bootstrap tooltip by default?

The tooltip appears when the user hovers over or focuses on the element.

intermediate

How can you change the position of a Bootstrap tooltip?

Use the data-bs-placement attribute with values like top, bottom, left, or right to position the tooltip.

intermediate

Why is it important to include aria-label or aria-describedby with tooltips?

These attributes help screen readers understand the tooltip content, making your site accessible to users with disabilities.

Which attribute activates a Bootstrap tooltip on an element?

A tooltip-enable="yes"

B data-toggle="popover"

C data-bs-toggle="tooltip"

D data-bs-tooltip="true"

Bootstrap tooltips are activated by adding the attribute data-bs-toggle="tooltip" to the element.

What JavaScript code initializes all tooltips on a page in Bootstrap 5?

A new bootstrap.Tooltip(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

B bootstrap.Tooltip.initAll()

C tooltip.init()

D var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); });

Bootstrap 5 requires you to select all tooltip elements and create Tooltip instances for each using JavaScript as shown.

Which attribute controls the position of a Bootstrap tooltip?

A data-bs-placement

B data-bs-position

C tooltip-position

D placement-bs

The attribute data-bs-placement sets the tooltip position such as top, bottom, left, or right.

What event usually shows a tooltip in Bootstrap by default?

A Double click

B Hover or focus

C Click

D Scroll

Bootstrap tooltips appear when the user hovers over or focuses on the element.

Why should tooltips include ARIA attributes?

A To help screen readers understand tooltip content

B To make tooltips visible on mobile

C To improve SEO ranking

D To speed up page loading

ARIA attributes help users with disabilities by making tooltip content accessible to screen readers.

Explain how to add and initialize a tooltip on a button using Bootstrap 5.

Think about the HTML attributes and the JavaScript code needed.

Describe how to make tooltips accessible for users with screen readers.

Accessibility means helping all users understand content.