CodingForums.com - View Single Post

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.

01-23-2013, 11:18 PM	PM User \| #2
VIPStephan The fat guy next door Join Date: Jan 2006 Location: Halle (Saale), Germany Posts: 7,592 Thanks: 5 Thanked 865 Times in 842 Posts	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. __________________ Don’t click this link!