CodingForums.com - hover or click ? icon for help

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - hover or click ? icon for help (http://www.codingforums.com/showthread.php?t=286324)

njfail

01-23-2013 10:58 PM

hover or click ? icon for help

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?

Thanks!

VIPStephan

01-23-2013 11:18 PM

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:

Code:

<div class="info">

  [info icon may go here]

  <div>(text here)</div>

</div>

Code:

.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.

Excavator

01-23-2013 11:20 PM

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.

All times are GMT +1. The time now is 09:21 PM.