About this set
Share and social icon patterns that usually need a JavaScript library, built with current CSS instead. The share popover is opened by a button with the popover attribute, so the browser handles opening, closing on Escape or an outside click, and the top layer. Anchor positioning places it under the button and flips it when there is no room, and @starting-style fades it in. Inside are six share targets as app-style tiles and a copy link field. Copying needs the Clipboard API, so about fifteen lines of vanilla JavaScript copy the link, set data-copied on the button and announce Link copied; :has() then swaps the button to a green Copied state. The tooltips are real text inside each icon link, shown on hover and focus, and positioned with anchor positioning and anchor-scope so they flip below an icon near the top of the window; without support they sit above the icon. The share bar uses a container query: in a narrow sidebar it shows icons only, and from 28rem of container width the same markup shows icons with names. The Bootstrap version adds .btn, .card, .input-group and .form-control.
What’s included
- Popover share menu with no JavaScript to open or close it
- Anchor positioning with flip fallbacks for the popover and the tooltips
- Copied state driven by :has() and announced in a status line
- CSS-only tooltips whose text is the link name
- Container query switches the share bar between icons and labels
Accessibility
The Share button is a native popover trigger and the popover is a dialog labelled Share this article, closed with Escape. Share links and tooltip links are named by visible plus hidden text, the copy field has a label and the result is announced through role=status. Every control shows a 3px focus outline, and the popover, tooltip and colour transitions are removed under prefers-reduced-motion.
Customise it
Change the anchor name, position-area and position-try-fallbacks in .mc-pop and .mc-tip to move the popover and tooltips, and the 28rem breakpoint in the @container rule. Colours are the #0f172a ink and the .mc-network brand classes; in Tailwind the same values sit in arbitrary properties and the @md: variant.
