View Full Version : hover or click ? icon for help

01-23-2013, 11:58 PM
I want to create little ? icons that when you hover over them or click them, they show a little notification. Kind of like when you hover over a link with title, it'll show what the title is. Well in this case, I'd like it to show a few sentences giving people some information.

I tried searching for how to do it, but I guess I just don't know what to search for, because I couldn't find anything :(

Could someone tell me how this is done?


01-24-2013, 12:18 AM
That’s called “tooltip” and there is a default browser function for that – as you already noted –, the title attribute. It can be used on any element. If you want custom tooltips you can do like this:

<div class="info">
[info icon may go here]
<div>(text here)</div>

.info {position: relative;}
.info div {
display: none;
background: white;
padding: 10px;
width: 150px;
top: 5px;
left: 5px;
position: absolute;
.info:hover div {display: block;}

Adjust as necessary.

01-24-2013, 12:20 AM
Hello njfail,
You can put a title on an image that works the same. If that doesn't give you enough control, there are several jQuery solutions for tooltips (https://www.google.com/search?q=jQuery+tooltip&sourceid=ie7&rls=com.microsoft:en-us:IE-Address&ie=&oe=&rlz=).