{"id":2743,"date":"2024-06-19T05:41:27","date_gmt":"2024-06-19T11:41:27","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2743"},"modified":"2024-06-24T13:55:41","modified_gmt":"2024-06-24T19:55:41","slug":"footnotes-progressively-enhanced-to-popovers","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/footnotes-progressively-enhanced-to-popovers\/","title":{"rendered":"Footnotes Progressively Enhanced to Popovers"},"content":{"rendered":"\n

Michelle Barker is onto an excellent idea in Progressively Enhanced Popover Toggletips<\/a>. Her idea is that footnotes are the perfect sort of thing to make popovers. You know popovers: It’s like when I put a superset1<\/a><\/sup> number in a sentence (like I just did) and then link it down to the bottom of the post to explain something in more detail which would have been distracting detail to put in the paragraph itself. But “jumping down” like <a href=\"#footnote-1\"><\/code> is also<\/em> distracting. Why not just open the extra information in a little popup? Indeed!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I like the idea of “doing both”. As Michelle says:<\/p>\n\n\n\n

\n

We could<\/em> also hide the list when anchor positioning is supported, but I think it\u2019s also more user-friendly to include references as a list in addition<\/strong> to within the document.<\/p>\n<\/blockquote>\n\n\n\n

But then I read:<\/p>\n\n\n\n

\n

A small downside is that this approach requires a bit of content duplication.<\/p>\n<\/blockquote>\n\n\n\n

The way Michelle did it was to put an <ol><\/code> of footnotes at the bottom as usual, and then also put the [popover]<\/code> footnotes up in the content as well, which is the duplication. <\/p>\n\n\n\n

The duplication isn’t that<\/em> big of a deal. It just could be a little annoying for some readers (uh, yes, I already read this thank you<\/em>). It mostly sucks because it makes them harder to maintain. You’d have to make identical changes manually in two places. If that’s no problem, Michelle’s technique is sound and you could use it as-is!<\/p>\n\n\n\n

But… it got me thinking that there must be a way to re-use the same content for both!<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Using the Popover API for HTML Tooltips<\/a>\n <\/li>\n
  2. \n Footnotes Progressively Enhanced to Popovers<\/a>\n <\/li>\n
  3. \n Popovers Work Pretty Nicely as Slide-Out Drawers<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    Attempt 1) Duplicates via JavaScript<\/h2>\n\n\n\n

    My first take was that we gotta stop the manual content duplication. That’ll be a huge pain to maintain. So let’s do the duplication of the footnote list in JavaScript, hide it both visually and from screen readers as the original list is still there, and use the duplicates for the popovers. <\/p>\n\n\n\n

    Since that original list is still there, we can test the browser support for popovers and just entirely bail out if the support isn’t there.<\/p>\n\n\n

    \/\/ browser supports popovers<\/span>\nif<\/span> (HTMLElement.prototype.hasOwnProperty(\"popover\"<\/span>)) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Then we’ll:<\/p>\n\n\n\n
      \n
    1. Clone the existing list of footnotes<\/li>\n\n\n\n
    2. Adjust the IDs so we don’t have duplicate IDs<\/li>\n\n\n\n
    3. Add the popover<\/code> attributes<\/li>\n<\/ol>\n\n\n
      if<\/span> (HTMLElement.prototype.hasOwnProperty(\"popover\"<\/span>)) {\n  \/\/ find the list of footnotes and clone it<\/span>\n  const<\/span> references = document<\/span>.querySelector(\".references\"<\/span>);\n  const<\/span> duplicateReferences = references.cloneNode(true<\/span>);\n  \n  \/\/ hide the duplicate from screen readers before re-injecting it into DOM<\/span>\n  duplicateReferences.setAttribute(\"aria-hidden\"<\/span>, true<\/span>);\n  references.parentNode.insertBefore(duplicateReferences, references.nextSibling);\n\t\n  \/\/ loop over each footnote to make a popover<\/span>\n  const<\/span> popovers = duplicateReferences.querySelectorAll(\"li\"<\/span>);\n  popovers.forEach(popover<\/span> =><\/span> {\n    popover.id = `ref_${popover.id}<\/span>`<\/span>;\n    popover.setAttribute(\"popover\"<\/span>, true<\/span>);\n  });\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      Looking in the web inspector we can see now that both lists are there:<\/p>\n\n\n
      \n
      \"\"<\/figure>\n<\/div>\n\n\n
      The <button><\/code> elements which trigger the popups are still up above in the content, referring to these new popovers that now exist. In fact both the link and the button are both there:<\/p>\n\n\n
      <a<\/span> class<\/span>=\"popover-replace\"<\/span> href<\/span>=\"#1\"<\/span>><\/span><sup<\/span>><\/span>1<\/sup<\/span>><\/span><\/a<\/span>><\/span>\n<button<\/span> popovertarget<\/span>=\"ref_1\"<\/span>><\/span><sup<\/span>><\/span>1<\/sup<\/span>><\/span><\/button<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      People will only ever see\/use one or the other.<\/strong> There is an <a><\/code> link there by default, then if popovers are supported, it’s replaced by the button. That was already in Michelle’s code:<\/p>\n\n\n
      [popovertarget]<\/span> {\n  display<\/span>: none;\n}\n\n@supports<\/span> (anchor-name:<\/span> --ref_1) {\n  [popovertarget]<\/span> {\n    display<\/span>: inline;\n    ...\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      So that’s this!<\/p>\n\n\n\n