function p() {
          return (0, d.jsxs)(r.WI, {
            title: 'Tooltips',
            lead: 'Tooltips display informative text when users hover over, focus on, or tap an element.',
            module: '@rmwc/tooltip',
            styles: ['@rmwc/tooltip/tooltip.css'],
            examples: a,
            addon: !0,
            children: [
              (0, d.jsx)(r.sb, { children: 'Basic Usage' }),
              (0, d.jsx)(r.PJ, {
                children:
                  'Wrap any component in a `Tooltip` and provide the content attribute. The only requirement is that is has a single React child, and that the child can accept `onMouseEnter`, `onMouseLeave`, `onFocus`, and `onClick` props.'
              }),
              (0, d.jsx)(r.q3, {
                label: 'Default',
                children: (0, d.jsxs)(d.Fragment, {
                  children: [
                    (0, d.jsx)(o.u, {
                      content: 'Cookies',
                      children: (0, d.jsx)(s.h, { icon: 'star_border' })
                    }),
                    (0, d.jsx)(o.u, {
                      content: 'Pizza',
                      children: (0, d.jsx)(s.h, { icon: 'favorite_border' })
                    }),
                    (0, d.jsx)(o.u, {
                      content: 'Icecream',
                      children: (0, d.jsx)(s.h, { icon: 'mood' })
                    })
                  ]
                })
              }),
              (0, d.jsx)(r.sb, { children: 'Variants' }),
              (0, d.jsx)(r.q3, {
                label: 'With Arrow',
                children: (0, d.jsx)(o.u, {
                  content: 'Cake',
                  showArrow: !0,
                  children: (0, d.jsx)(s.h, { icon: 'cake' })
                })
              }),
              (0, d.jsx)(r.q3, {
                label: 'Controlled / Always open',
                children: (0, d.jsx)(o.u, {
                  content: 'Hello',
                  align: 'right',
                  open: !0,
                  children: (0, d.jsx)(s.h, { icon: 'mood' })
                })
              }),
              (0, d.jsx)(r.q3, {
                label: 'Rich Content',
                children: (0, d.jsx)(o.u, {
                  content: (0, d.jsxs)('div', {
                    style: { display: 'flex' },
                    children: [
                      (0, d.jsx)(c.qE, {
                        src: 'images/avatars/captainamerica.png',
                        size: 'large',
                        name: 'Steve Rogers'
                      }),
                      (0, d.jsxs)('div', {
                        style: { marginLeft: '0.5rem' },
                        children: [
                          (0, d.jsx)('b', { children: 'Captain America' }),
                          (0, d.jsx)('div', { children: 'Steve Rogers' })
                        ]
                      })
                    ]
                  }),
                  children: (0, d.jsx)('span', {
                    role: 'button',
                    children: 'S. Rogers'
                  })
                })
              }),
              (0, d.jsx)(r.q3, {
                label: 'Styled content',
                children: (0, d.jsx)(o.u, {
                  content: (0, d.jsx)('div', {
                    style: {
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      background: 'white',
                      width: '20rem',
                      height: '8rem',
                      color: 'black',
                      borderRadius: '3px',
                      margin: '0 -3px'
                    },
                    children: 'Hello World!'
                  }),
                  children: (0, d.jsx)('span', {
                    role: 'button',
                    children: 'Popover Window'
                  })
                })
              }),
              (0, d.jsx)(r.q3, {
                label: 'Delay',
                children: (0, d.jsxs)(d.Fragment, {
                  children: [
                    (0, d.jsx)(o.u, {
                      content: 'Cookies',
                      enterDelay: 1e3,
                      children: (0, d.jsx)(l.z, { label: 'Enter Delay' })
                    }),
                    (0, d.jsx)(o.u, {
                      content: 'Pizza',
                      leaveDelay: 1e3,
                      children: (0, d.jsx)(l.z, { label: 'Leave Delay' })
                    }),
                    (0, d.jsx)(o.u, {
                      content: 'Icecream',
                      enterDelay: 1e3,
                      leaveDelay: 1e3,
                      children: (0, d.jsx)(l.z, { label: 'Both' })
                    })
                  ]
                })
              }),
              (0, d.jsx)(r.q3, {
                label: 'Alignment',
                children: function () {
                  return [
                    'left',
                    'right',
                    'top',
                    'bottom',
                    'topLeft',
                    'topRight',
                    'bottomLeft',
                    'bottomRight'
                  ].map(function (e) {
                    return (0,
                    d.jsx)(o.u, { content: 'Align: '.concat(e), align: e, children: (0, d.jsx)(s.h, { icon: 'trip_origin' }) }, e);
                  });
                }
              }),
              (0, d.jsx)(r.sb, { children: 'Activation' }),
              (0, d.jsx)(r.PJ, {
                children:
                  'By default, tooltips will activate on hover and focus. You can change this behavior by passing one or more options to the `activateOn` prop.'
              }),
              (0, d.jsx)(r.q3, {
                label: 'Default',
                children: (0, d.jsxs)(d.Fragment, {
                  children: [
                    (0, d.jsx)(o.u, {
                      content: 'Cookies',
                      activateOn: 'hover',
                      children: (0, d.jsx)(l.z, { label: 'Hover' })
                    }),
                    "''",
                    (0, d.jsx)(o.u, {
                      content: 'Pizza',
                      activateOn: 'click',
                      children: (0, d.jsx)(l.z, { label: 'Click' })
                    }),
                    (0, d.jsx)(o.u, {
                      content: 'Icecream',
                      activateOn: 'focus',
                      children: (0, d.jsx)(l.z, { label: 'Focus' })
                    }),
                    (0, d.jsx)(o.u, {
                      content: 'Cake',
                      activateOn: ['hover', 'focus'],
                      children: (0, d.jsx)(l.z, { label: 'Multiple' })
                    })
                  ]
                })
              }),
              (0, d.jsx)(r.sb, { children: 'Usage with RMWCProvider' }),
              (0, d.jsx)(r.PJ, {
                children:
                  'The RMWCProvider allows you to specify global defaults for your tooltips.'
              }),
              (0, d.jsx)(r.q3, {
                label: 'Using Provider',
                children: (0, d.jsx)(u.pK, {
                  tooltip: {
                    align: 'right',
                    activateOn: 'hover',
                    showArrow: !0,
                    leaveDelay: 500,
                    enterDelay: 0
                  },
                  children: (0, d.jsx)(o.u, {
                    content: 'Hello World!',
                    children: (0, d.jsx)(l.z, { label: 'With Provider' })
                  })
                })
              }),
              (0, d.jsx)(r.PQ, {
                src: i,
                components: [{ displayName: 'Tooltip', component: o.u }]
              })
            ]
          });
        }
You make something like a popover window by just styling your inner content.