Benchmark: nextSibling vs data-tooltip-content vs data-tooltip-id

HTML Preparation code:

<div class="js-tooltip-sibling">hier de content waar je over heen hovered</div>
<div class="c-tooltip">
  js tooltip sibling
</div>

<div
  class="js-tooltip" 
  data-tooltip-placement="top" 
  data-tooltip-content="hier de content die in je tooltip doet"
  data-tooltip-trigger="click"
>
  js tooltip content
</div>

<div
  class="js-tooltip"
  data-tooltip-id="tooltip-123"
>
  Info
</div>

<div id="tooltip-123" class="c-tooltip" hidden>
  tooltip via id
</div>

Tests:

nextSibling
const elements = document.querySelectorAll('.js-tooltip-sibling'); for (let el of elements) { const tooltip = el.nextElementSibling; if (tooltip && tooltip.classList.contains('c-tooltip')) { const content = tooltip.innerHTML; } }
data-tooltip-content
const elements = document.querySelectorAll('[data-tooltip-content]'); for (let el of elements) { const content = el.dataset.tooltipContent; }
data-tooltip-id
const elements = document.querySelectorAll('[data-tooltip-id]'); for (let el of elements) { const tooltip = document.getElementById(el.dataset.tooltipId); if (tooltip) { const content = tooltip.innerHTML; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
nextSibling
data-tooltip-content
data-tooltip-id

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 20 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
nextSibling	3507091.2 Ops/sec
data-tooltip-content	3066131.0 Ops/sec
data-tooltip-id	2650638.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):

LLMs can make mistakes. Check important info.

The provided benchmark tests three different methods for accessing tooltip content in a web application built with HTML and JavaScript. The focus is on how the tooltip content is retrieved based on different attributes or methods. The test cases are:

1. **Using `nextSibling`**: 
   - **Benchmark Definition**: This method selects elements with the class `.js-tooltip-sibling`, and for each element, it retrieves the next sibling element (the tooltip). The script checks whether this sibling has the class `c-tooltip`, and if so, it retrieves its inner HTML.
   - **Pros**:
     - Directly accesses the DOM structure, potentially providing faster access since it relies on sibling relationships.
     - Efficient for situations where the tooltip content is always structured to follow the triggering element.
   - **Cons**:
     - This method is strictly dependent on the DOM structure, making it less flexible. If the DOM layout changes, this method may break.
     - It can lead to incorrect results if the expected sibling element does not exist or is altered by JavaScript.
   
2. **Using `data-tooltip-content`**:
   - **Benchmark Definition**: This method selects elements with the `data-tooltip-content` attribute, and retrieves the tooltip content using the `dataset` property, which accesses custom data attributes.
   - **Pros**:
     - Provides a more declarative way to associate tooltip content with elements. This is often easier to manage and move around in the DOM without affecting functionality.
     - Enhances code readability and maintainability by making explicit which elements are related to tooltips without relying on the DOM structure.
   - **Cons**:
     - Could be marginally less performant than direct DOM traversal if there are many elements since it involves accessing `dataset`.
     - Depending on browser implementations, accessing `dataset` can sometimes have slight overhead compared to raw DOM access.

3. **Using `data-tooltip-id`**:
   - **Benchmark Definition**: This method selects elements with the `data-tooltip-id` attribute. It retrieves the referenced tooltip by using `getElementById` with the ID stored in the `data-tooltip-id`, then accesses its inner HTML.
   - **Pros**:
     - Allows for a very flexible structure where tooltips are separate elements in the DOM. You can change tooltips without altering the triggering elements directly.
     - Encourages the reuse of tooltip contents since multiple triggers can refer to the same tooltip by ID.
   - **Cons**:
     - Requires an additional lookup to find the ID in the DOM, which can make it slightly slower than accessing the content directly if DOM elements are many.
     - Care must be taken to ensure that IDs are unique and appropriately managed, or it could lead to unexpected behavior.

### Performance Results
The benchmark results indicate the following execution speeds:

- **`nextSibling`**: 3,507,091.25 executions per second
- **`data-tooltip-content`**: 3,066,131.00 executions per second
- **`data-tooltip-id`**: 2,650,638.25 executions per second

From the results, the `nextSibling` method is the fastest, likely due to its direct access nature. The `data-tooltip-content` method, while slightly slower, is still quite performant and offers better maintainability. The `data-tooltip-id` method is the slowest, reflecting the overhead of looking up tooltip elements by ID in the DOM.

### Alternatives
- **Using a Tooltip Library**: There are several libraries available (like Tippy.js or Tooltip.js) which abstract the tooltip functionality and handle accessibility, positioning, and performance optimizations for you. These libraries may introduce some overhead but often provide a more robust solution.
- **Using CSS Tooltips**: If the content is static, you might consider simple CSS tooltips via the `:hover` pseudo-class. This method is lightweight but provides less flexibility when dynamic content is required.

In summary, the benchmark presents various methods for handling tooltips in JavaScript, weighing the trade-offs in performance, maintainability, and flexibility. Each approach has its advantages and disadvantages, providing engineers with options based on the specific requirements of their projects.

Related benchmarks:

nextSibling vs data-tooltip-content vs data-tooltip-id (version: 1)

Comparing performance of: nextSibling vs data-tooltip-content vs data-tooltip-id

Created: 20 days ago by: Guest

Jump to the latest result

nextSibling

data-tooltip-content

data-tooltip-id

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 20 days ago):