How to create a dialogue hover box for term tips?

Posted on 2011-04-28
Last Modified: 2012-05-11
Thanks for your time.

We are trying to create a website with loads of terminologies. We would like to have an effect to show up a dialogue box upon mouse hover each term.

The box needs to be responsive (with style) and the page needs to be load fast as well.

We prefer stay with only CSS, or CSS with limited jquery.

Question by:Lenny_Peng
    LVL 13

    Expert Comment

    I am not sure you could achieve this cross browser with CSS only.

    You may want to look into a light javascript called FancyZoom.

    Panic uses it on their Coda site. Rollover the Download button.

    All rollovers are fully stylable.

    Author Comment


    That's fast, is there a light JS available? All I've seen so far, are quite complicated with mutiple js files.

    Also we would prefer to have the dialogue box showing up near the mouse cursor when user hover on the terms.

    Thank you again for your help and have a nice weekend!
    LVL 19

    Accepted Solution


    Author Closing Comment

    Thanks, there are lots of things there. I will find a suitable one soon, I hope.

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now