Progressively Enhanced Popover Toggletips

The CSS Anchor Positioning specification allows us to position elements relative to an anchor on our web page. I am particularly excited about being able to combine anchor positioning with the Popover API to show and hide elements, as mentioned in a recent post.

Anchor positioning is currently only supported in the latest Chrome release. Below is a code experiment demonstrating anchor-positioned toggletips using text from Manifesto for a Humane Web. In browsers that do not support anchor positioning, simple anchor links are used to navigate to the article references. In supporting browsers, buttons replace the anchor links to open popovers displaying the references relative to the article’s position.

See the Pen
Progressively enhanced popover toggletips by Michelle Barker (@michellebarker)
on CodePen.

I could choose to hide the list when anchor positioning is supported, but I believe including references as a list in addition to within the document is more user-friendly.

One downside is the need for content duplication with this approach. Additionally, I utilize the :has pseudo-class to position the small arrows attached to the bubbles when the popover is open, by styling the ::before pseudo-element of the button.

[popovertarget]:has(+ :popover-open) {
position: relative;
background: yellow;

&::before {
–clip: polygon(50% 0, 100% 100%, 0 100%);
content: ”;
position: absolute;
top: 100%;
left: 50%;
width: 1rem;
height: 1rem;
background: lavender;
transform: translateX(-50%);
-webkit-clip-path: var(–clip);
clip-path: var(–clip);
}
}

This approach requires placing the element with the popover attribute adjacent to the popover trigger (the button) in the HTML.

The reason for not making the arrow part of the bubble itself is that its position changes based on available space. I utilize the position-try properties and at-rule to allow the popover to flip to the left or right, ensuring visibility when activated and preventing overflow.

[popover] {
position-try-options: –pos-left, –pos-right;
position-try-order: most-width;
}

@position-try –pos-left {
left: anchor(var(–anchor) -150%);
}

@position-try –pos-right {
right: anchor(var(–anchor) 150%);
left: auto;
}

Custom properties are used for anchor names to refer to each toggletip’s specific anchor while keeping other positioning values consistent. This may lead to slightly confusing reading, especially as the anchor name resembles a custom property.

[popover] {
–anchor: –ref_1;

position-anchor: var(–anchor);
top: anchor(var(–anchor) 150%);
left: anchor(var(–anchor) -150%);

&#ref_2 {
–anchor: –ref_2;
}

&#ref_3 {
–anchor: –ref_3;
}
}

[popovertarget=”ref_1″] {
anchor-name: –ref_1;
}

[popovertarget=”ref_2″] {
anchor-name: –ref_2;
}

[popovertarget=”ref_3″] {
anchor-name: –ref_3;
}

I prefer to refer to these as “toggletips” rather than tooltips, as they provide supplementary information rather than appearing on hover before clicking. This concept is further explained in Heydon Pickering’s Inclusive Components.

Source link