Tooltip and popover initialization in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a tooltip in Bootstrap?

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

beginner

How do you initialize a tooltip using Bootstrap's JavaScript?

You select the element(s) and call new bootstrap.Tooltip(element) to activate the tooltip functionality.

beginner

What attribute must be added to an element to enable a Bootstrap popover?

Add data-bs-toggle="popover" to the element to mark it for popover initialization.

intermediate

How do you initialize all tooltips on a page using JavaScript?

Use var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); then loop through and create new tooltips for each element.

beginner

What is the difference between a tooltip and a popover in Bootstrap?

A tooltip shows brief text on hover or focus. A popover can contain more content like title and body and requires a click or manual trigger.

Which attribute is used to enable a Bootstrap tooltip on an element?

A data-bs-toggle="tooltip"

B data-toggle="tooltip"

C tooltip-enable

D data-bs-tooltip

Bootstrap 5 uses the attribute data-bs-toggle="tooltip" to mark elements for tooltip initialization.

How do you activate a popover on an element using JavaScript in Bootstrap?

A element.popover()

B bootstrap.activatePopover(element)

C new Popover(element)

D new bootstrap.Popover(element)

You create a new Popover instance with new bootstrap.Popover(element) to activate it.

What event usually triggers a Bootstrap tooltip to appear?

A Scroll

B Click

C Hover or focus

D Double click

Tooltips appear when the user hovers over or focuses on the element.

Which method initializes all tooltips on a page at once?

A Call bootstrap.Tooltip.initAll()

B Loop through elements with data-bs-toggle="tooltip" and create new bootstrap.Tooltip for each

C Add class .tooltip-active to body

D Use jQuery $('.tooltip').tooltip()

You select all elements with data-bs-toggle="tooltip" and create new bootstrap.Tooltip instances for each.

Which Bootstrap component can contain a title and body content?

A Popover

B Tooltip

C Alert

D Badge

Popovers can have a title and body, unlike tooltips which show only brief text.

Explain how to initialize tooltips on multiple elements in Bootstrap using JavaScript.

Think about selecting elements and applying the Tooltip constructor.

Describe the difference between a tooltip and a popover in Bootstrap and when you might use each.

Consider the content and user interaction differences.

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