How to create a dialogue hover box for term tips?

Posted on 2011-04-28
Medium Priority
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
  • 2
LVL 13

Expert Comment

ID: 35489143
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

ID: 35489193

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 20

Accepted Solution

Rikin Shah earned 2000 total points
ID: 35489207

Author Closing Comment

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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

569 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