{"id":2806,"date":"2024-06-24T13:54:13","date_gmt":"2024-06-24T19:54:13","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2806"},"modified":"2024-06-24T13:54:14","modified_gmt":"2024-06-24T19:54:14","slug":"popovers-work-pretty-nicely-as-slide-out-drawers","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/popovers-work-pretty-nicely-as-slide-out-drawers\/","title":{"rendered":"Popovers Work Pretty Nicely as Slide-Out Drawers"},"content":{"rendered":"\n

I remain a little obsessed about the popover<\/code> attribute. This innocuous little HTML attribute produces an accessible and design-friendly “popup” UI\/UX effect for little effort. I think the “tooltip” is generally the top use case for this feature, which is now well-supported<\/a> across the board. <\/p>\n\n\n\n

First, we looked at how to use popovers for tooltips<\/a>. Because the anchor positioning API isn’t as well-supported yet, this leveraged JavaScript to do the positioning. <\/p>\n\n\n\n

Second, we looked at progressively enhancing footnotes into tooltips<\/a>. This technique ultimately checked if the browser supported both popovers and anchor positioning and if so would do native popups, otherwise fallback to being a normal footnote, which is perfectly fine. <\/p>\n\n\n\n

This time, we’ll look at a tooltip design that just doesn’t require<\/em> the anchor positioning API or any JavaScript positioning at all. We’ll make the tooltips slide out from the bottom of the screen instead.<\/p>\n\n\n

\n
\"example<\/figure>\n<\/div>\n\n\n

I guess I’ll have to admit this is a series:<\/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

    Closed = Footnote; Open = Drawer<\/h2>\n\n\n\n

    This idea of drawer-based popups don’t require this fancy dance of having the content already visible on the page as a footnote. I just really like the idea<\/a>. In CSS, the ultimately expresses itself like this:<\/p>\n\n\n

    \/* Display as a footnote *\/<\/span>\n[popover] {\n  display: list<\/span>-item;\n  ...\n\n  \/* Display as a drawer *\/<\/span>\n  &:popover-open {\n    position: fixed;\n    ...\n\n  }\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    This will ultimately require a bunch of declarations to force the content into both shapes. Such is CSS. <\/p>\n\n\n\n
    Progressive Enhancement Happens at the Link\/Button Level<\/h2>\n\n\n\n
    Footnotes, the “fallback” for this, require an <a><\/code> link to jump down to them. Whereas the popups require a <button><\/code> to work. So we actually need to display both right next to each other:<\/p>\n\n\n
    <a<\/span> class<\/span>=\"footnote-anchor\"<\/span> href<\/span>=\"#ref_1\"<\/span>><\/span><sup<\/span>><\/span>1<\/sup<\/span>><\/span><\/a<\/span>><\/span>\n<button<\/span> popovertarget<\/span>=\"ref_1\"<\/span>><\/span>1<\/button<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    You could do this either-way-around, but here we’ll hide the anchor links by default and only show them if popups aren’t supported:<\/p>\n\n\n
    .footnote-anchor<\/span> {\n  display<\/span>: none;\n}\nhtml<\/span>.no-popovers<\/span> {\n  .footnote-anchor {\n    display<\/span>: inline;\n  }\n  [popovertarget]<\/span> {\n    display<\/span>: none;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    We have this no-popovers<\/code> class via:<\/p>\n\n\n
    if<\/span> (!HTMLElement.prototype.hasOwnProperty(\"popover\"<\/span>)) {\n  document<\/span>.documentElement.classList.add(\"no-popovers\"<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The Sliding Door<\/h2>\n\n\n\n
    The trick to a drawer sliding out from the bottom of the screen is:<\/p>\n\n\n\n
      \n
    1. Fixed positioning of the drawer<\/li>\n\n\n\n
    2. Translated off the page the height of itself<\/li>\n\n\n\n
    3. Translated on to the page when opened<\/li>\n<\/ol>\n\n\n\n
      That largely looks like this:<\/p>\n\n\n
      [popover] {\n<\/span><\/span>  ...\n<\/span><\/span>  \n<\/span><\/span>  &:popover-open {\n<\/span><\/span>    z-index: 1<\/span>;\n<\/span><\/span>    position: fixed;\n<\/span><\/span>    inset: auto;\n<\/span><\/span>    bottom: 0<\/span>;\n<\/span><\/span>    left: 0<\/span>;\n<\/span><\/span>    margin: 0<\/span>;\n<\/span><\/span>    width: 100<\/span>vi;\n<\/span><\/span>    padding: 2<\/span>rem;\n<\/span><\/span>    background: lavender;\n<\/span><\/span>    box-shadow: 0<\/span> -1<\/span>rem 5<\/span>rem oklch(0<\/span>% 0<\/span> 0<\/span> \/ 0.33<\/span>);\n<\/span><\/span>\n<\/span><\/span>    animation: slide-open 0.2<\/span>s;\n<\/span><\/mark>\n<\/span><\/span>    \/* Make sure the popup isn't screen-covering *\/<\/span>\n<\/span><\/span>    max-block-size: 50<\/span>dvh;\n<\/span><\/span>    overflow: auto;\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      I was thinking we could pull off the slide-in of the drawer using @starting-style<\/code> and a transition, but it turns out you can set the starting style of just the open state like we’d need here. Fortunately, we can just call a simple keyframe animation to do the trick:<\/p>\n\n\n
      @keyframes<\/span> slide-open {\n  0% {\n    transform<\/span>: translate<\/span>(0<\/span>, 100%<\/span>);\n  }\n  100% {\n    transform<\/span>: translate<\/span>(0<\/span>, 0<\/span>);\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      Especially nice on mobile, but looks good on desktop too.<\/h2>\n\n\n\n
      The drawer just seems to make sense on the mobile screen. I don’t think positioning the popup next to the button would even be that helpful, the drawer is nicer.<\/p>\n\n\n\n\t\t
      \n\t\t\t