Tooltip component in Bootsrap - Performance & Optimization

Performance: Tooltip component

MEDIUM IMPACT

This affects interaction responsiveness and visual stability by adding small UI elements on hover or focus.

Showing helpful text on hover or focus without slowing down interaction

Bootsrap

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

Uses Bootstrap's built-in tooltip initialization without extra heavy JS on hover, keeping interaction smooth.

📈 Performance GainNon-blocking tooltip display, improves INP by avoiding main thread blocking

Showing helpful text on hover or focus without slowing down interaction

Bootsrap

<button data-bs-toggle="tooltip" title="Info" onmouseover="heavyFunction()">Hover me</button>
<script>function heavyFunction() { for(let i=0;i<1000000;i++){} }</script>

Running heavy JavaScript on tooltip hover blocks the main thread, causing input lag and slow tooltip display.

📉 Performance CostBlocks rendering for 100+ ms on hover, causing poor INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy JS on hover	Multiple event handlers with heavy JS	Triggers multiple reflows due to layout changes	High paint cost from frequent DOM updates	[X] Bad
Bootstrap native tooltip	Single tooltip element reused	Minimal reflows, uses transforms	Low paint cost with GPU compositing	[OK] Good

Rendering Pipeline

Tooltip triggers user interaction events, causing style recalculation and paint for the tooltip element. The tooltip is positioned and composited without layout thrashing if implemented well.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckPaint stage due to tooltip element rendering and positioning

Core Web Vital Affected

INP

This affects interaction responsiveness and visual stability by adding small UI elements on hover or focus.

Optimization Tips

1Avoid heavy JavaScript execution on tooltip hover or focus.

2Use Bootstrap's native tooltip initialization for efficient handling.

3Position tooltips with CSS transforms to minimize layout and paint costs.

Performance Quiz - 3 Questions

What causes the biggest delay when showing a tooltip with heavy JavaScript on hover?

A Main thread blocking from heavy JS execution

B Network delay loading tooltip content

C CSS selector complexity

D Browser repaint optimizations

DevTools: Performance

How to check: Record a performance profile while hovering the tooltip trigger. Look for long tasks or main thread blocking during tooltip show.

What to look for: Check for long scripting tasks or forced synchronous layouts that delay tooltip appearance.