Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 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.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •