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.

Practice

1. What is the main purpose of a Bootstrap tooltip component?

easy

A. To show extra information when hovering or focusing on an element

B. To create a clickable button

C. To display a full page modal

D. To change the background color of an element

Solution

1. Step 1: Understand tooltip functionality

   Tooltips provide extra info on hover or focus without cluttering the page.

2. Step 2: Compare options with tooltip purpose

   Only To show extra information when hovering or focusing on an element describes showing extra info on hover/focus, which matches tooltip behavior.

3. Final Answer:

   To show extra information when hovering or focusing on an element -> Option A

4. Quick Check:

   Tooltip = extra info on hover/focus [OK]

Hint: Tooltips show hints on hover or focus [OK]

Common Mistakes:

• Confusing tooltips with modals or buttons
• Thinking tooltips change element styles permanently
• Assuming tooltips require clicks

2. Which attribute is required on an element to enable a Bootstrap tooltip?

easy

A. data-bs-toggle="tooltip"

B. data-toggle="modal"

C. aria-label="tooltip"

D. data-bs-target="#tooltip"

Solution

1. Step 1: Identify correct attribute for tooltip

   Bootstrap tooltips require data-bs-toggle="tooltip" on the element.

2. Step 2: Eliminate other attributes

   Other options relate to modals, accessibility labels, or targets, not tooltips.

3. Final Answer:

   data-bs-toggle="tooltip" -> Option A

4. Quick Check:

   Tooltip attribute = data-bs-toggle="tooltip" [OK]

Hint: Look for data-bs-toggle="tooltip" to enable tooltips [OK]

Common Mistakes:

• Using data-toggle instead of data-bs-toggle
• Confusing tooltip with modal attributes
• Missing the required attribute entirely

3. What will happen when the following code runs in a Bootstrap-enabled page?

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Save changes">Save</button>
<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
</script>

medium

A. Nothing happens because tooltips need clicks

B. The button text changes to 'Save changes' immediately

C. An error occurs because the script is incorrect

D. Hovering over the button shows a tooltip with text 'Save changes'

Solution

1. Step 1: Understand the HTML and JS code

   The button has data-bs-toggle="tooltip" and a title attribute. The script initializes Bootstrap tooltips on all such elements.

2. Step 2: Predict the user interaction

   When hovering or focusing on the button, the tooltip with text 'Save changes' will appear.

3. Final Answer:

   Hovering over the button shows a tooltip with text 'Save changes' -> Option D

4. Quick Check:

   Tooltip shows on hover with title text [OK]

Hint: Tooltip text comes from title attribute, shows on hover [OK]

Common Mistakes:

• Thinking tooltip shows on click only
• Expecting button text to change
• Assuming script causes error

4. Identify the error in this Bootstrap tooltip setup:

<button type="button" class="btn btn-primary" data-toggle="tooltip" title="Click me">Click</button>
<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  var tooltipList = tooltipTriggerList.map(function (el) {
    return new bootstrap.Tooltip(el);
  });
</script>

medium

A. The title attribute is missing

B. The script uses the wrong selector for tooltips

C. The button uses data-toggle instead of data-bs-toggle

D. Bootstrap tooltips do not require JavaScript initialization

Solution

1. Step 1: Check the button attribute

   The button uses data-toggle="tooltip" but Bootstrap 5 requires data-bs-toggle="tooltip".

2. Step 2: Confirm script selector matches attribute

   The script selects elements with data-bs-toggle="tooltip", so it finds none because the button uses the old attribute.

3. Final Answer:

   The button uses data-toggle instead of data-bs-toggle -> Option C

4. Quick Check:

   Bootstrap 5 uses data-bs-toggle, not data-toggle [OK]

Hint: Match data-bs-toggle attribute with JS selector [OK]

Common Mistakes:

• Using old Bootstrap 4 attribute data-toggle
• Assuming title attribute is optional
• Thinking JS initialization is unnecessary

5. You want to add a tooltip to a link that is accessible and works on keyboard focus. Which is the best way to implement it using Bootstrap?

hard

A. Add aria-label only without JavaScript

B. Add data-bs-toggle="tooltip" and title attributes, then initialize tooltips with JavaScript

C. Use data-bs-toggle="popover" instead of tooltip

D. Add a span with tooltip text visible always

Solution

1. Step 1: Understand accessibility and Bootstrap tooltip setup

   Bootstrap tooltips require data-bs-toggle="tooltip" and a title attribute for text. They show on hover and keyboard focus.

2. Step 2: Evaluate other options for accessibility and functionality

   Add aria-label only without JavaScript lacks tooltip behavior, C uses popover (different), D shows text always (not tooltip).

3. Final Answer:

   Add data-bs-toggle="tooltip" and title attributes, then initialize tooltips with JavaScript -> Option B

4. Quick Check:

   Tooltip needs data-bs-toggle, title, and JS init for accessibility [OK]

Hint: Use data-bs-toggle and title with JS for accessible tooltips [OK]

Common Mistakes:

• Skipping JavaScript initialization
• Confusing popovers with tooltips
• Making tooltip text always visible