Tooltip component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Bootstrap initialize tooltips?

Bootstrap tooltips require JavaScript to work. Which of the following is the correct way to initialize all tooltips on a page using Bootstrap 5?

A

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

B var tooltipList = Array.from(document.querySelectorAll('[data-toggle="tooltip"]')).map(el => new bootstrap.Tooltip(el));

C bootstrap.Tooltip.initAll();

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

💡 Hint

Look for the official Bootstrap 5 way to initialize multiple tooltips using JavaScript.

Bootstrap 5 requires you to select all elements with data-bs-toggle="tooltip" and then create a new Tooltip instance for each element. Option A correctly does this by converting the NodeList to an array and mapping each element to a new Tooltip.

Option A uses the wrong attribute data-toggle and tries to call map directly on a NodeList, which is not an array.

Option A is not a valid Bootstrap method.

Option A tries to create one Tooltip instance for all elements, which is incorrect.

📝 Syntax

intermediate

Identify the syntax error in this tooltip HTML

Which option contains a syntax error that prevents the tooltip from working correctly?

Bootsrap

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Hover me</button>

A <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title=Tooltip on top>Hover me</button>

B <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Hover me</button>

C <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Hover me</button>

D <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title='Tooltip on top'>Hover me</button>

💡 Hint

Check how the title attribute value is written in HTML.

Option A is missing quotes around the title attribute value, which is invalid HTML and breaks the tooltip.

Option A uses the old data-toggle attribute, which Bootstrap 5 replaced with data-bs-toggle, so the tooltip won't initialize.

Options A, B, and C are all valid syntax, but option A uses double quotes consistently, which is standard.

❓ rendering

advanced

What is the visual result of this tooltip placement?

Given this button with a tooltip, where will the tooltip appear relative to the button when hovered?

Bootsrap

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip below">Hover me</button>

A The tooltip appears above the button.

B The tooltip appears to the right of the button.

C The tooltip appears to the left of the button.

D The tooltip appears below the button.

💡 Hint

Look at the value of the data-bs-placement attribute.

The data-bs-placement="bottom" attribute tells Bootstrap to show the tooltip below the button.

Other values like top, left, and right place the tooltip accordingly.

❓ selector

advanced

Which CSS selector targets only active tooltips?

Bootstrap tooltips add the class show when visible. Which CSS selector correctly styles only visible tooltips?

A .tooltip[visible]

B .tooltip.show

C .tooltip.active

D .tooltip:visible

💡 Hint

Bootstrap toggles the show class to control visibility.

Bootstrap adds the show class to tooltips when they are visible. The selector .tooltip.show targets only those visible tooltips.

Option B uses a non-existent CSS pseudo-class :visible.

Option B looks for an attribute visible, which does not exist.

Option B uses active class, which Bootstrap does not add to tooltips.

❓ accessibility

expert

How to make Bootstrap tooltips accessible to keyboard users?

Which practice improves accessibility for Bootstrap tooltips so keyboard users can also see the tooltip content?

A Add <code>aria-hidden="true"</code> to the tooltip content to hide it from screen readers.

B Use only mouse events to show tooltips, ignoring keyboard focus.

C Add <code>tabindex="0"</code> to the tooltip trigger element and ensure tooltips appear on focus as well as hover.

D Remove the <code>title</code> attribute and rely only on visual tooltips.

💡 Hint

Think about how keyboard users navigate and how screen readers announce content.

Adding tabindex="0" makes the element focusable by keyboard. Showing tooltips on focus as well as hover ensures keyboard users can see the tooltip.

Option C excludes keyboard users.

Option C hides tooltip content from screen readers, reducing accessibility.

Option C removes the native tooltip text, which is important for accessibility.