Code snippets for the "How we built the DevTools Tooltips" article

intersections.ts

{
  // The ID of the area we're highlighting
  "elements-panel": {
    // Some information for the displayed content
    "tooltip": {
      "title": "...",
      "description": "...",
    },
    // The list of DOM elements to wrap
    "selectors": [
      {
        // Each element comes with a CSS selector so we can
        // find it in the document.
        "selector": '[aria-label="Elements"]',
        // And optionally an offset to avoid gaps between elements.
        "offsets": [{direction: Direction.Bottom, size: 2}] 
      },
      {
        "selector": '#elements-content'
      },
      {
        "selector": '#elements-crumbs'
      },
    ],
  },
}