Member Avatar for teedoff

Not sure if I should post this here. But I know you can create rollovers to display image "popups" using jQuery. I'm sure there are some drawbacks to using this method, such as the drawbacks to using javascript in general...ie people turning off js and such.

My question is this:

Is there a way to create something similar to this without using javascript? What I mean is, I have an online order form that accepts credit cards for payments. I have two images linked to text so that people can see where to find their security code on their credit card. I would love to be able to just have an image pop up that displays these images when the user rolls over the links. Is this possible in other ways beside client side scripting?

Thanks for any suggestions or pointing me in the right direction.

  • 3 Contributors
  • 3 Replies
  • 93 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Ritesh_4

Dani AI

Generated

As noted, you can do this without JavaScript. and already pointed toward CSS-only approaches; below are two practical patterns (hover+focus and a details/summary disclosure) plus production tips for a payments form.

HTML/CSS (hover + keyboard support)

<a href="#" class="help" aria-describedby="cvv-popup">Where is my CVV?
  <span id="cvv-popup" class="popup" role="tooltip">
    <img src="/images/cvv.png" alt="Shows CVV location on the card">
  </span>
</a>

.help { position: relative; display: inline-block; }
.popup { position: absolute; left: 100%; top: 0; width: 220px; display: none; }
.help:hover .popup,
.help:focus .popup { display: block; }

Notes: include :focus so keyboard users can open the popup. Using display:none hides the content from assistive tech until visible. Test tab order and adjust with tabindex only if necessary.

details/summary (touch + accessibility friendly)

<details class="cvv-help">
  <summary>Where is my CVV?</summary>
  <img src="/images/cvv.png" alt="CVV location on card">
</details>

<details> gives built-in keyboard and touch support and is often the simplest, no-JS disclosure. Style the summary to look like inline help or a small icon; note older browsers may need a fallback.

Practical tips

  • Preload the small help image (CSS background or <link rel="preload" as="image">) to avoid flicker.
  • Keep images small and hosted over HTTPS (payments pages must avoid mixed content).
  • Always supply good alt text; if decorative, use alt="".
  • Test on keyboard-only, screen readers, and touch devices. If you need consistent behavior across all devices, a tiny JS toggle that also updates aria-hidden may be the most robust progressive-enhancement path.

Further reading: MDN pages on the :hover pseudo-class and the <details> element provide up-to-date behavior and accessibility notes.

Recommended Answers

All 3 Replies

Member Avatar for teedoff

Thanks for the link and help! Awesome. I have it working now. Just have to tweak the positioning of the rollover popup.

Member Avatar for Ritesh_4

Can have a look as well on this:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.