CSS Tooltip harmful for Largest Contentful Paint, how to resolve?

Question

We are using CSS Tooltips, that get visible when the user hovers an element, like in this example: https://www.w3schools.com/css/css_tooltip.asp

We found out recently, that this does harm WebVitals Largest Contentful Paint Measurements, if the tooltip is a bit bigger (just insert some 'lorem ipsums' in the example above).

• If the user doesn't hover the element, the initially rendered text will be the largest contentful paint element -> all is fine, is this one is rendered fast.
• If the user hovers over the element after (say) 10seconds (without doing any click or scroll before), the bigger popup will be the largest contentful paint element -> this is not OK, as Chrome now assigns the page an LCP value auf 10seconds, as the element only appeared after 10 seconds.

Any ideas how to implement tooltips, that don't get in danger of harming our LCP web vitals value?

Answer 1

This is a known issue with LCP measurement in Chrome, and there is ongoing work to better measure how often it is happening and what the best fix is. See this bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=1288027

I'd recommending commenting in that bug with the details of your use case, or starring it to help the team prioritize.