Tooltip and popover initialization in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct way to initialize a tooltip with Bootstrap 5

Which option correctly initializes a tooltip on an element with the ID myButton using Bootstrap 5's JavaScript API?

Bootsrap

<button id="myButton" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>

A const tooltip = new bootstrap.Tooltip(document.querySelector('#myButton'));

B const tooltip = bootstrap.Tooltip('#myButton');

C const tooltip = new bootstrap.Tooltip(document.getElementById('myButton'));

D bootstrap.Tooltip.init('#myButton');

💡 Hint

Remember to use the new keyword and pass a DOM element, not a selector string.

Bootstrap 5 tooltips are initialized by creating a new bootstrap.Tooltip instance and passing a DOM element. Option C correctly uses document.getElementById to get the element and the new keyword to create the tooltip.

Option C passes a selector string instead of a DOM element, which is incorrect. Option C misses the bootstrap. namespace. Option C uses a non-existent init method.

🧠 Conceptual

intermediate

Understanding popover trigger options

What is the effect of setting the trigger option to 'focus' when initializing a Bootstrap popover?

A The popover shows when the element is focused and hides when it loses focus.

B The popover shows on mouse hover and hides on mouse leave.

C The popover shows on click and hides on clicking outside.

D The popover shows automatically on page load.

💡 Hint

Think about how keyboard users interact with elements.

Setting trigger: 'focus' means the popover appears when the element receives keyboard or mouse focus and disappears when it loses focus. This is useful for accessibility and keyboard navigation.

Option A describes the hover trigger, option A describes the click trigger, and option A is not a valid trigger behavior.

❓ rendering

advanced

Result of missing Popper.js dependency

What will happen if you initialize a Bootstrap 5 tooltip without including the Popper.js library?

Bootsrap

const tooltip = new bootstrap.Tooltip(document.querySelector('#btn'));

A The tooltip will appear but positioned incorrectly.

B The tooltip will not appear and a JavaScript error about Popper will be shown in the console.

C The tooltip will appear normally without any issues.

D The page will crash and stop loading.

💡 Hint

Bootstrap tooltips rely on Popper.js for positioning.

Bootstrap 5 tooltips depend on Popper.js to position the tooltip correctly. If Popper.js is missing, the tooltip will not show and a JavaScript error will appear in the browser console indicating Popper is not found.

Option B is incorrect because the tooltip won't appear at all. Option B is wrong because Popper is required. Option B is too extreme; the page won't crash but the tooltip fails.

❓ selector

advanced

Selecting multiple elements for popover initialization

Given multiple buttons with the class btn-popover, which code correctly initializes popovers on all of them?

Bootsrap

<button class="btn-popover" title="Popover 1">One</button>
<button class="btn-popover" title="Popover 2">Two</button>
<button class="btn-popover" title="Popover 3">Three</button>

A bootstrap.Popover.init(document.querySelectorAll('.btn-popover'));

B document.getElementsByClassName('btn-popover').Popover();

C new bootstrap.Popover(document.querySelectorAll('.btn-popover'));

D document.querySelectorAll('.btn-popover').forEach(el => new bootstrap.Popover(el));

💡 Hint

Remember that querySelectorAll returns a list, and you need to initialize each element separately.

Option D correctly selects all elements with .btn-popover and initializes a new popover instance on each element using forEach.

Option D tries to pass a NodeList directly to the constructor, which expects a single element, causing an error. Option D uses a non-existent init method. Option D tries to call Popover() on an HTMLCollection, which is invalid.

❓ accessibility

expert

Ensuring accessible tooltips with Bootstrap

Which practice best improves accessibility when using Bootstrap tooltips?

Bootsrap

<button id="infoBtn" type="button" class="btn btn-info" data-bs-toggle="tooltip" title="More info">Info</button>

A Add <code>aria-describedby="infoBtnTooltip"</code> to the button and set the tooltip's <code>id</code> to <code>infoBtnTooltip</code>.

B Use only the <code>title</code> attribute without JavaScript initialization.

C Remove the <code>title</code> attribute and rely on visual tooltip only.

D Add <code>aria-hidden="true"</code> to the button to hide it from screen readers.

💡 Hint

ARIA attributes help screen readers associate tooltips with elements.

Option A correctly uses aria-describedby to link the button to the tooltip content, improving screen reader support.

Option A is insufficient because the title attribute alone is not always accessible or user-friendly. Option A hides the button from assistive technologies, which is bad. Option A removes the tooltip text from accessibility tools.

Practice

1. What is the main purpose of adding data-bs-toggle="tooltip" to an HTML element in Bootstrap?

easy

A. To mark the element so Bootstrap can show a tooltip on hover or focus

B. To make the element clickable and open a modal

C. To apply a popover that shows on page load

D. To disable all Bootstrap styles on that element

Solution

1. Step 1: Understand the role of data-bs-toggle

   The attribute data-bs-toggle="tooltip" tells Bootstrap this element should show a tooltip when hovered or focused.

2. Step 2: Differentiate tooltip from other components

   Unlike modals or popovers, tooltips show small text on hover/focus, not on click or page load.

3. Final Answer:

   To mark the element so Bootstrap can show a tooltip on hover or focus -> Option A

4. Quick Check:

   Tooltip attribute means show tooltip on hover/focus [OK]

Hint: Remember: data-bs-toggle="tooltip" means show tooltip on hover [OK]

Common Mistakes:

• Confusing tooltip with popover or modal
• Thinking it triggers on click instead of hover/focus
• Assuming it disables styles

2. Which JavaScript code correctly initializes all tooltips on a Bootstrap page?

easy

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

B. var tooltipList = document.querySelectorAll('.tooltip').initialize();

C. bootstrap.initTooltips();

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

Solution

1. Step 1: Identify correct Bootstrap tooltip initialization syntax

   Bootstrap requires selecting elements with data-bs-toggle="tooltip" and creating new bootstrap.Tooltip instances for each.

2. Step 2: Check each option for correct syntax and selectors

   var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); uses correct selector and method. Options B, C, and D use invalid methods or selectors.

3. Final Answer:

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

4. Quick Check:

   Correct selector and new bootstrap.Tooltip() call = A [OK]

Hint: Use document.querySelectorAll('[data-bs-toggle="tooltip"]') with new bootstrap.Tooltip [OK]

Common Mistakes:

• Using wrong attribute selector like data-toggle instead of data-bs-toggle
• Calling non-existent methods like initialize()
• Not creating Tooltip instances for each element

3. Given this HTML and JavaScript, what happens when the user clicks the button?

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-content="Hello!">Click me</button>

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl);
});
</script>

medium

A. A popover with text 'Hello!' appears when the button is clicked

B. A tooltip with text 'Hello!' appears on hover

C. Nothing happens because popovers need manual trigger

D. An error occurs because data-bs-content is invalid

Solution

1. Step 1: Understand popover default trigger behavior

   Bootstrap popovers by default show on click, not hover.

2. Step 2: Check the HTML and JS setup

   The button has data-bs-toggle="popover" and data-bs-content="Hello!". The JS initializes popovers on all such elements.

3. Final Answer:

   A popover with text 'Hello!' appears when the button is clicked -> Option A

4. Quick Check:

   Popover default trigger is click, so popover shows on click [OK]

Hint: Popovers show on click by default, tooltips on hover [OK]

Common Mistakes:

• Thinking popovers show on hover like tooltips
• Assuming data-bs-content is invalid
• Expecting popover without JS initialization

4. What is wrong with this code snippet that tries to initialize tooltips?

<button data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>

<script>
var tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
var tooltipList = tooltipTriggerList.map(function (el) {
  return new bootstrap.Tooltip(el);
});
</script>

medium

A. Missing call to bootstrap.Tooltip.init()

B. querySelectorAll returns a NodeList, which does not have map method

C. The attribute should be data-toggle, not data-bs-toggle

D. title attribute is not valid for tooltips

Solution

1. Step 1: Check the type returned by querySelectorAll

   querySelectorAll returns a NodeList, which does not have the map() method.

2. Step 2: Identify how to fix the error

   Convert NodeList to array using Array.from() or [].slice.call() before calling map.

3. Final Answer:

   querySelectorAll returns a NodeList, which does not have map method -> Option B

4. Quick Check:

   NodeList lacks map(), convert to array first [OK]

Hint: NodeList has no map(), convert to array first [OK]

Common Mistakes:

• Using data-toggle instead of data-bs-toggle in Bootstrap 5
• Thinking title attribute is invalid for tooltips
• Assuming bootstrap.Tooltip.init() exists

5. You want to initialize both tooltips and popovers on a page. Which code snippet correctly does this without repeating code unnecessarily?

hard

A. document.querySelectorAll('[data-bs-toggle]').forEach(el => new bootstrap.Tooltip(el));

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

C. const triggers = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle="popover"]'));
triggers.forEach(el => {
if(el.getAttribute('data-bs-toggle') === 'tooltip') new bootstrap.Tooltip(el);
else if(el.getAttribute('data-bs-toggle') === 'popover') new bootstrap.Popover(el);
});

D. bootstrap.initAllTooltipsAndPopovers();

Solution

1. Step 1: Understand the need to initialize tooltips and popovers separately

   Tooltips and popovers require different Bootstrap classes to be instantiated.

2. Step 2: Check which code correctly initializes each element based on its attribute

   const triggers = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle="popover"]')); triggers.forEach(el => { if(el.getAttribute('data-bs-toggle') === 'tooltip') new bootstrap.Tooltip(el); else if(el.getAttribute('data-bs-toggle') === 'popover') new bootstrap.Popover(el); }); selects all elements with either tooltip or popover toggle, then creates the correct instance per element.

3. Step 3: Identify errors in other options

   new bootstrap.Tooltip(document.querySelectorAll('[data-bs-toggle="tooltip"]')); new bootstrap.Popover(document.querySelectorAll('[data-bs-toggle="popover"]')); tries to pass NodeList directly to constructor (invalid). bootstrap.initAllTooltipsAndPopovers(); calls a non-existent method. document.querySelectorAll('[data-bs-toggle]').forEach(el => new bootstrap.Tooltip(el)); initializes all as tooltips, ignoring popovers.

4. Final Answer:

   const triggers = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle="popover"]')); triggers.forEach(el => { if(el.getAttribute('data-bs-toggle') === 'tooltip') new bootstrap.Tooltip(el); else if(el.getAttribute('data-bs-toggle') === 'popover') new bootstrap.Popover(el); }); -> Option C

5. Quick Check:

   Check attribute inside loop to create correct instance [OK]

Hint: Loop once, check data-bs-toggle, create Tooltip or Popover [OK]

Common Mistakes:

• Passing NodeList directly to constructor
• Calling non-existent Bootstrap methods
• Initializing all as tooltips ignoring popovers