Tooltip and popover initialization in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize all tooltips on the page using Bootstrap 5.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Ael

Bthis

Cdocument

Dwindow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'this' instead of the element parameter.

Passing the whole document instead of individual elements.

Passing window object which is not an element.

The map function passes each element el to the Tooltip constructor to initialize tooltips on those elements.

2fill in blank

medium

Complete the code to initialize a popover on the element with id 'myPopover'.

Bootsrap

var popoverTrigger = document.getElementById('myPopover');
var popover = new bootstrap.Popover([1]);

Drag options to blanks, or click blank then click option'

Athis

Bdocument.getElementById('popover')

Cdocument.querySelector('.popover')

DpopoverTrigger

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a selector string instead of the element.

Using 'this' which does not refer to the element here.

Using a wrong element reference.

You must pass the element reference to the Popover constructor to initialize it on that element.

3fill in blank

hard

Fix the error in the code to properly initialize all popovers on elements with data attribute 'data-bs-toggle="popover"'.

Bootsrap

var popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
var popoverList = popoverTriggerList.map(function (el) {
  return new bootstrap.Popover([1]);
});

Drag options to blanks, or click blank then click option'

Ael

BpopoverTriggerList

Cdocument

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the whole NodeList instead of individual elements.

Trying to call map directly on NodeList without conversion.

Using 'this' inside the map callback incorrectly.

querySelectorAll returns a NodeList, which does not have a map method. You must convert it to an array first or use Array.from. But here, the main fix is to pass each element el to the Popover constructor.

4fill in blank

hard

Fill both blanks to initialize all tooltips and popovers on the page.

Bootsrap

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[1]'));
var tooltipList = tooltipTriggerList.map(function (el) {
  return new bootstrap.Tooltip(el);
});

var popoverTriggerList = [].slice.call(document.querySelectorAll('[2]'));
var popoverList = popoverTriggerList.map(function (el) {
  return new bootstrap.Popover(el);
});

Drag options to blanks, or click blank then click option'

A[data-bs-toggle="tooltip"]

B[data-toggle="tooltip"]

C[data-bs-toggle="popover"]

D[data-toggle="popover"]

Attempts:

3 left

💡 Hint

Common Mistakes

Using old Bootstrap 4 attribute names like data-toggle.

Mixing tooltip and popover selectors incorrectly.

Using incorrect quotes or missing brackets.

Bootstrap 5 uses data-bs-toggle attribute to identify tooltip and popover triggers. So the selectors must match exactly.

5fill in blank

hard

Fill all three blanks to create a popover with title 'Info', content 'Hello World', and trigger on focus.

Bootsrap

var popover = new bootstrap.Popover(document.getElementById('infoPopover'), {
  title: [1],
  content: [2],
  trigger: [3]
});

Drag options to blanks, or click blank then click option'

A"Info"

B"Hello World"

C"focus"

D"click"

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around string values.

Using wrong trigger values like 'hover' when focus is needed.

Mixing title and content values.

The popover options require strings for title, content, and trigger. Here, the trigger is set to focus so the popover shows when the element gains focus.

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