I do know, tremendous area of interest, nevertheless it may very well be any loop, actually. The problem is having a number of tooltips on the identical web page that make use of the Popover API for toggling goodness and CSS Anchor Positioning for attaching a tooltip to its respective anchor component.
There’s loads of shifting items when working with popovers:
- A
popoverwants an ID (and an accessible role whereas we’re at it). - A
popovertargetmust reference that ID. - IDs should be distinctive for semantics, sure, but in addition to hook a
popoverright into apopovertarget.
That’s simply the half coping with the Popover API. Turning to anchors:
- An anchor wants an
anchor-name. - A goal component must reference that
anchor-name. - Every
anchor-nameshould be distinctive to connect the goal to its anchor correctly.
The necessities themselves are difficult. However it’s tougher working inside a loop since you want a option to generate distinctive IDs and anchor names so the whole lot is attached correctly with out conflicting with different components on the web page. In WordPress, we question an array of web page objects:
$property_query = new WP_Query(array(
'post_type' => 'web page',
'post_status' => 'publish',
'posts_per_page' => -1, // Question all of them!
'orderby' => 'title',
'order' => "ASC"
));Earlier than we get into our whereas() assertion I’d wish to stub out the HTML. That is how I desire a web page object to look within its container:
<div class="almanac-group">
<div class="group-letter"><a href="#">A</a></div>
<div class="group-list">
<particulars id="" class="group-item">
<abstract>
<h2><code>accent-color</code></h2>
</abstract>
</particulars>
<!-- Repeat for all properties -->
</div>
</div>
<!-- Repeat for the whole alphabet -->OK, let’s stub out the tooltip markup whereas we’re right here, focusing simply contained in the <particulars> component since that’s what represents a single web page.
<particulars id="web page" class="group-item">
<abstract>
<h2><code>accent-color</code></h2>
<span id="tooltip" class="tooltip">
<!-- Popover Goal and Anchor -->
<button class="info-tip-button" aria-labelledby="experimental-label" popovertarget="experimental-label">
<!-- and so on. -->
</button>
<!-- Popover and Anchor Goal -->
<div popover id="experimental-label" class="info-tip-content" position="tooltip">
Experimental function
</div>
</span>
</abstract>
</particulars>With me up to now? We’ll begin with the Popover facet of issues. Proper now we’ve got a <button> that’s linked to a <div popover>. Clicking the previous toggles the latter.
Styling isn’t actually what we’re speaking about, nevertheless it does assist to reset a couple of popover issues so it doesn’t get that border and sit instantly within the heart of the web page. You’ll need to check out Michelle Barker’s article for some nice ideas that make this improve progressively.
.info-tip {
place: relative; /* Units containment */
/* Bail if Anchor Positioning isn't supported */
[popovertarget] {
show: none;
}
/* Fashion issues up if Anchor Positioning is supported */
@helps (anchor-name: --infotip) {
[popovertarget] {
show: inline;
place: relative;
}
[popover] {
border: 0; /* Removes default border */
margin: 0; /* Resets placement */
place: absolute; /* Required */
}
}That is additionally the purpose at which you’ll need to begin utilizing Chrome as a result of Safari and Firefox are nonetheless engaged on supporting the function.
We’re doing good! The large deal for the time being is positioning the tooltip’s content material in order that it’s beside the button. That is the place we will begin working with Anchor Positioning. Juan Diego’s guide is the bee’s knees in the event you’re searching for a deep dive. The gist is that we will join an anchor to its goal component in CSS. First, we register the <button> because the anchor component by giving it an anchor-name. Then we anchor the <div popover> to the <button> with position-anchor and use the anchor() perform on its inset properties to place it precisely the place we would like, relative to the <button>:
.tooltip {
place: relative; /* Units containment */
/* Bail if Anchor Positioning isn't supported */
[popovertarget] {
show: none;
}
/* Fashion issues up if Anchor Positioning is supported */
@helps (anchor-name: --tooltip) {
[popovertarget] {
anchor-name: --tooltip;
show: inline;
place: relative;
}
[popover] {
border: 0; /* Removes default border */
margin: 0; /* Resets placement */
place: absolute; /* Required */
position-anchor: --tooltip;
prime: anchor(--tooltip -15%);
left: anchor(--tooltip 110%);
}
}
}That is precisely what we would like! However it’s additionally the place issues extra difficult after we attempt to add extra tooltips to the web page. Discover that each buttons need to cull the identical tooltip.
That’s no good. What we’d like is a singular ID for every tooltip. I’ll simplify the HTML so we’re wanting on the proper spot:
<particulars>
<!-- ... -->
<!-- Popover Goal and Anchor -->
<button class="info-tip-button" aria-labelledby="experimental-label" popovertarget="experimental-label">
<!-- ... -->
</button>
<!-- Popover and Anchor Goal -->
<div popover id="experimental-label" class="info-tip-content" position="tooltip">
Experimental function
</div>
<!-- ... -->
</particulars>The popover has an ID of #experimental-label. The anchor references it within the popovertarget attribute. This connects them but in addition connects different tooltips which are on the web page. What can be perfect is to have a sequence of IDs, like:
<!-- Popover and Anchor Goal -->
<div popover id="experimental-label-1" class="info-tip-content" position="tooltip"> ... </div>
<div popover id="experimental-label-2" class="info-tip-content" position="tooltip"> ... </div>
<div popover id="experimental-label-3" class="info-tip-content" position="tooltip"> ... </div>
<!-- and so forth... -->We will make the web page question right into a perform that we name:
perform letterOutput($letter, $propertyID) {
$property_query = new WP_Query(array(
'post_type' => 'web page',
'post_status' => 'publish',
'posts_per_page' => -1, // Question all of them!
'orderby' => 'title',
'order' => "ASC"
));
}And when calling the perform, we’ll take two arguments which are particular solely to what I used to be engaged on. In the event you’re curious, we’ve got a structured set of pages that go Almanac → Sort → Letter → Characteristic (e.g., Almanac → Properties → A → accent-color). This perform outputs the kid pages of a “Letter” (i.e., A → accent-color, anchor-name, and so on.). A baby web page is perhaps an “experimental” CSS function and we’re marking that within the UI with tooltops subsequent to every experimental function.
We’ll put the HTML into an object that we will return when calling the perform. I’ll minimize it down for brevity…
$html .= '<particulars id="web page" class="group-item">';
$html .= '<abstract>';
$html .= '<h2><code>accent-color</code></h2>';
$html .= '<span id="tooltip" class="tooltip">';
$html .= '<button class="info-tip-button" aria-labelledby="experimental-label" popovertarget="experimental-label"> ';
// ...
$html .= '</button>';
$html .= '<div popover id="experimental-label" class="info-tip-content" position="tooltip">';
// ...
$html .= '</div>';
$html .= '</span>';
$html .= '</abstract>';
$html .= '</particulars>';
return $html;WordPress has some capabilities we will leverage for looping via this markup. For instance, we will insert the_title() instead of the hardcoded submit title:
$html .= '<h2><code>' . get_the_title(); . '</code></h2>';We will additionally use get_the_id() to insert the distinctive identifier related to the submit. For instance, we will use it to provide every <particulars> component a singular ID:
$html .= '<particulars id="page-' . get_the_id(); . '" class="group-item">';That is the key sauce for getting the distinctive identifiers wanted for the popovers:
// Outputs one thing like `id="experimental-label-12345"`
$html .= '<div popover id="experimental-label-' . get_the_id(); . '" class="info-tip-content" position="tooltip">';We will do the very same factor on the <button> so that every button is wired to the proper popover:
$html .= '<button class="info-tip-button" aria-labelledby="experimental-label-' . get_the_id(); . '" popovertarget="experimental-label"> ';We must do the identical factor to the .tooltip component itself to tell apart one from one other:
$html .= '<span id="tooltip-' . get_the_id(); . '" class="tooltip">';I can’t precisely recreate a WordPress occasion in a CodePen demo, however right here’s a simplified instance with related markup:
The popovers work! Clicking both one triggers its respective popover component. The issue you’ll have realized is that the targets are each connected to the identical anchor component — so it seems like we’re triggering the identical popover when clicking both button!
That is the CSS facet of issues. What we’d like is the same option to apply distinctive identifiers to every anchor, however as dashed-idents as a substitute of IDs. One thing like this:
/* First tooltip */
#info-tip-1 {
[popovertarget] {
anchor-name: --infotip-1;
}
[popover] {
position-anchor: --infotip-1;
prime: anchor(--infotip-1 -15%);
left: anchor(--infotip-1 100%);
}
}
/* Second tooltip */
#info-tip-2 {
[popovertarget] {
anchor-name: --infotip-1;
}
[popover] {
position-anchor: --infotip-1;
prime: anchor(--infotip-1 -15%);
left: anchor(--infotip-1 100%);
}
}
/* Remainder of tooltips... */That is the place I really feel like I needed to make a compromise. I may have leveraged an @for loop in Sass to generate distinctive identifiers however then I’d be introducing a brand new dependency. I may additionally drop a <fashion> tag instantly into the WordPress template and use the identical capabilities to generate the identical submit identifiers however then I’m sustaining kinds in PHP.
I selected the latter. I like having dashed-idents that match the IDs set on the .tooltip and popover. It ain’t fairly, nevertheless it works:
$html .= '
<fashion>
#info-tip-' . get_the_id() . ' {
[popovertarget] {
anchor-name: --infotip-' . get_the_id() . ';
}
[popover] {
position-anchor: --infotip-' . get_the_id() . ';
prime: anchor(--infotip-' . get_the_id() . ' -15%);
left: anchor(--infotip-' . get_the_id() . ' 100%);
}
}
</fashion>'We’re technically achieved!
The one factor I had left to do for my particular use case was add a conditional assertion that outputs the tooltip solely whether it is marked an “Experimental Characteristic” within the CMS. However you get the thought.
Isn’t there a greater approach?!
Sure! However not fairly but. Bramus proposed a new ident() function that, when it turns into official, will generate a sequence of dashed idents that can be utilized to call issues just like the anchors I’m working with and stop these names from colliding with each other.
<div class="group-list">
<particulars id="item-1" class="group-item">...</particulars>
<particulars id="item-2" class="group-item">...</particulars>
<particulars id="item-3" class="group-item">...</particulars>
<particulars id="item-4" class="group-item">...</particulars>
<particulars id="item-5" class="group-item">...</particulars>
<!-- and so on. -->
</div>/* Hypothetical instance — doesn't work! */
.group-item {
anchor-name: ident("--infotip-" attr(id) "-anchor");
/* --infotip-item-1-anchor, --infotip-item-2-anchor, and so on. */
}Let’s maintain our fingers crossed for that to hit the specs quickly!
