Popover is not working

Hi,

Popover is not working when front end rendering is enabled. If it is not compatible yet, any solution would be helpful.

Thanks!

Hello @kane,

Just tested right now, and working on my end.
Could you possibly detail your trigger element and setup as a whole?

Cheers,

Looks like Id is not populating for my button

image

image

Hi @kane,

Thanks for the details.
Is this using the latest Cwicly update?

I manually updated to 1.2.9.4.3 all my issues are fixed. sorry for wasting your time.

There are some quirks with styling for <a> tags in Cwicly. I believe Louis addresses these in the latest update. I see it fixed your issue, but you can take note of the below for future.

It causes an issue because the Popover is an absolutely positioned element. Once you make the trigger element (your button) a link, the popover is no longer positioned relative to the <a> tag. It basically falls off the page altogether.

If all the button does is launch the Popover, DO NOT activate the link. A workaround is to just use the button element without making the link active, and to which you can just add a bit of CSS for the pointer like so:

.button-ce499b5 {
cursor: pointer;
}

I haven’t dug into this into any more depth as of the current update, but this was my assessment. I also tend to wrap my <a> links inside a div container if I need to apply other CSS like animations for example.

On a related note, you probably want to tag it as <button> anyway, since that’s semantically accurate. Buttons trigger actions (like launching a popover or modal), whereas links take you somewhere, generally speaking.

Here’s a resource: Button versus Link | Introduction to Accessibility

1 Like

I’m not aware of these. The latest adjustments were meant for link styling when applied from a stylesheet, specifically on the backend. Could you possibly detail the issues you have experienced?

I’d be interested to see this specific issue you mention with Popovers, as they’re essentially made to work with any element, whatever their initial position. I also cannot reproduce the issue you mention with links.

Fair point, and I am having trouble recreating it. I have since updated to the latest version, so it’s all fine.

The previous comment about <a> sometimes causing unintended reactions stands. It may no longer be an issue, but certainly something I’ve encountered, and rectified by wrapping them in a container. I don’t mind that, necessarily. I’m short on time, so cannot dive into it, but I will bring it up if it should arise.

You might be referring to display: inline;, which is the initial display for links? This can sometimes cause confusion when styles don’t apply correctly?

It might be. Once I get some time I’ll dig into it a bit more.

It may well just be default CSS behaviour tripping me up, which is your fault for making Cwicly so faithful to proper web dev practices :laughing: