Member Avatar for bigwhiteegg

hi here
i just started learning HTML & CSS couple days ago
so please help me out :)
what I'm trying to do here is to
show a little box/window when the user moves his/her mouse to the designated point
in my case it is a city(that will be in a table cell w/ couple more cities)
the box/window will show an address correspond to the city
if the user can move his/her mouse into the box/window and is able to copy the address
that will be even better :)

please do inform me if the description isn't understandable.
thanks a lot for helping with my problem :)

  • 3 Contributors
  • 5 Replies
  • 115 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Good follow-ups so far from , and . Short version: a CSS-only hover can work, but if the little window must be interactive (so the user can move the mouse into it and copy text) you normally want JavaScript to manage visibility so the popup does not disappear the moment the pointer leaves the table cell.

Practical notes and pitfalls to avoid: put the popup where it won't be clipped by a parent with overflow:hidden (tables can clip absolutely positioned children). If you can, make the popup a child of the trigger element so a :hover solution stays visible while the pointer moves into it; otherwise append the popup to the body and compute its position. Add a small hide delay so quick pointer moves don't flicker the popup. For keyboard users, open on focus and close on blur or Escape.

A minimal pattern to keep the popup visible while the pointer is either on the trigger or the popup (vanilla JS, modern events):

const trigger = document.querySelector('.city');
const popup = document.querySelector('.address-popup');
let hideTimer;

function show() {
  clearTimeout(hideTimer);
  popup.classList.add('open');
  popup.setAttribute('aria-hidden', 'false');
}

function scheduleHide() {
  hideTimer = setTimeout(() => {
    popup.classList.remove('open');
    popup.setAttribute('aria-hidden', 'true');
  }, 150);
}

trigger.addEventListener('pointerenter', show);
popup.addEventListener('pointerenter', show);
trigger.addEventListener('pointerleave', scheduleHide);
popup.addEventListener('pointerleave', scheduleHide);
trigger.addEventListener('focus', show);
trigger.addEventListener('blur', scheduleHide);

Accessibility and copy behavior: make the popup focusable (tabindex), give it an appropriate role for interactive content (a tooltip role is for non-interactive hints), support Escape to close, and avoid CSS that prevents text selection. For a one-click copy option, use the Clipboard API (navigator.clipboard.writeText) when available; for touch devices provide a tap-to-open fallback since hover isn't reliable there.

Recommended Answers

All 5 Replies

Member Avatar for tinymark

Do you know Javascript? It sounds like you want a mouseover effect that displays a hidden div when the mouse is over the target. You would use a mouseout to hide the div when the mouse moves away.

Member Avatar for bigwhiteegg

Do you know Javascript? It sounds like you want a mouseover effect that displays a hidden div when the mouse is over the target. You would use a mouseout to hide the div when the mouse moves away.

oh~~~
I just started learning javascript earlier this afternoon
I'll take a look at the mouseover/mouseout part
thanks a lot!

Member Avatar for bigwhiteegg

I found something similar in jQuery's mouseover() method
looks like a possible solution to my problem

seems to me the mouseover() method does trigger something
but how do I make a little pop out window to show the content?
maybe the hide() and show() will do the trick?
or is there another way?

Member Avatar for teedoff

A simpler way without javascript, since some ppl chose to disable js in their browsers, would be with a hidden div thats activated with the hover. There are plenty of tutorials for that as well, but the basic jist of it would be:

Create a div or even an image with whatever you want to "pop-up" in a window, then set it to 0 width and 0 height. Then in your stylesheet have something like:

#divName a:hover {
         width: 200px;
         height: 200px;
         position: (whereever you need)

}

Then when the user hovers over the table cell or whereever the hidden div/image is, it will display. That simple. No hard to understand javascript and no worries about users not being able to see the window.

Edited by Nick Evan because: Fixed formatting
Member Avatar for teedoff

hmm marked solved. What did you do? Inquiring minds want to know! lol

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.