[LiberalJudaismParticipant]

I’ve added some popovers to this page: http://3a9.848.myftpupload.com/who-we-are/whos-who/

The popovers for the final few names on each column of each list seem to appear in the next column over and some are not even visible.

Can’t figure it out for the life of me as nothing is different in the shortcode between the names.

Here’s an example of the shortcode that I used:
[extra href=”mailto:a.abraham@liberaljudaism.org” target=”_blank” title=”Click to email Aaron” info=”popover” info_place=”right” info_trigger=”hover” info_content=”a.abraham@liberaljudaism.org”]Aaron Abraham[/extra]  <small>Communications, Events & Development</small>

[extra href=”mailto:ljtoday@liberaljudaism.org” target=”_blank” title=”Click to email Simon” info=”popover” info_place=”right” info_trigger=”hover” info_content=”ljtoday@liberaljudaism.org”]Simon Rothstein[/extra]  <small>LJ Today Editor & Public Relations</small>

Thanks!

[NicoModerator]

Hi There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[LiberalJudaismParticipant]

Hi

As you can see from the screenshots not all the popovers are appearing by the words that they are associated with.

The first screenshot is the correct placement and the second is an example of the incorrect placement of the popover.

Thanks

[Paul RModerator]

Hi,

Thank you for providing screenshots.

Though I can’t seem to replicate the issue on my end.

Can you provide us steps on how we could replicate this.

May I know what browser a re you using.

Thanks

[LiberalJudaismParticipant]

I’m using safari.

All I’m doing is hovering over the names in purple… the issue appears on every list on each tab.

Thanks

[ZeshanMember]

Hi there,

Thanks for writing back!

Popovers are JavaScript generated. Adding a JavaScript generated element inside another element that uses JavaScript to fully initialize, i.e., tabs, could cause conflict such as incorrect popover positioning. That said, it’s not advisable to nest these elements.

However, I’m not sure if it will work, but you can try using following CSS code under Custom > CSS in the Customizer:

.x-tab-content>.x-tab-pane:not(.active) {
    height: 0 !important;
    overflow: hidden;
    padding: 0;
    display: block;
}

Thank you!

[Author]

Posts