My website features a contact form for visitors to submit testimonials. The form appears in a modal box with tooltips that pop up when you hover over certain fields. However, I am facing an issue where the tooltips are appearing behind the modal box instead of in front of it. You can see an example of the site here:
The modal pops up when you click on the "write a review" image. While the tooltips do appear, they are hidden from view. If you hover over the radio box, you will be able to see them.
I attempted to resolve this by adding a z-index, but unfortunately, that did not work as expected.
$j(".ccf-tooltip-field").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7,
tipClass: 'ccf-tooltip',
zIndex: '100100',
});
Any suggestions or advice would be greatly appreciated.