Tooltip and popover initialization in Bootsrap - Performance & Optimization

Performance: Tooltip and popover initialization

MEDIUM IMPACT

This affects page interactivity speed and responsiveness when tooltips or popovers appear on user actions.

Initializing tooltips/popovers on many elements at page load

Bootsrap

const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
const tooltipList = tooltipTriggerList.map(el => new bootstrap.Tooltip(el, { trigger: 'hover focus' }));

Batch initialization with controlled triggers reduces unnecessary event listeners and delays initialization until needed.

📈 Performance Gainreduces blocking time by 30-50%, fewer reflows triggered

Initializing tooltips/popovers on many elements at page load

Bootsrap

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

Initializing tooltips on all elements at once can cause a large number of DOM queries and event listeners, blocking the main thread.

📉 Performance Costblocks rendering for 50-100ms on large pages, triggers multiple reflows

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager initialization on all elements	High (many queries and listeners)	Multiple reflows per tooltip/popover	High paint cost on show/hide	[X] Bad
Batch initialization with controlled triggers	Moderate (single query, fewer listeners)	Single reflow per interaction	Moderate paint cost	[!] OK
Lazy initialization on interaction	Low (only on demand)	Minimal reflows	Low paint cost	[OK] Good

Rendering Pipeline

Tooltip and popover initialization involves DOM querying, event listener attachment, and style calculations when shown. Excessive initialization increases layout recalculations and paint operations.

→DOM Operations

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint due to multiple reflows triggered by showing/hiding tooltips or popovers

Core Web Vital Affected

INP

This affects page interactivity speed and responsiveness when tooltips or popovers appear on user actions.

Optimization Tips

1Avoid initializing all tooltips/popovers on page load to reduce blocking time.

2Use lazy initialization triggered by user interaction to save CPU and memory.

3Batch DOM queries and event listener attachments to minimize reflows and paints.

Performance Quiz - 3 Questions

What is a performance downside of initializing all tooltips on page load?

A Improves initial page load speed

B Blocks rendering and increases memory usage

C Reduces event listeners needed

D Prevents layout shifts

DevTools: Performance

How to check: Open DevTools > Performance tab > Record while interacting with tooltips/popovers > Stop and analyze Main thread activity and Layout events

What to look for: Look for long scripting tasks during initialization and multiple Layout/Style recalculations indicating inefficient tooltip/popover setup

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