Run results for: nextSibling vs data-tooltip-content vs data-tooltip-id

Run details:

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: Chrome 134

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

nextSibling

3.5M/s

data-tooltip-content

3.1M/s

data-tooltip-id

2.7M/s

View exact numbers

Test name	Executions per second
✓ nextSibling	3,507,091 Ops/sec
data-tooltip-content	3,066,131 Ops/sec
data-tooltip-id	2,650,638 Ops/sec

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; } }