Css Hover Text Information

I need some help! I'm doing website, and i'm having a problem with a thing. I have a

and a image next to it, that image is a question mark. And i want that when i mouse

Solution 1:

I suggest to go with css.

If you are doing layout, use CSS, if you are setting the look and feel use CSS, if your doing animation use CSS3

If you attach event handlers or reacting to user input use JavaScript.

Note that people use JavaScript instead of CSS for browser support. There are other solutions like emulating CSS features using javascript.

source

css

#information{
    display:none;
}

h1:hover + #information{
    display:block;
}

fiddle

Solution 2:

If you want simple tooltip kind of thing, then you can use this code

<h1>
     branch<img id="help" src="Questionmark.png"></img>
     <div id="information">Branch is...</div>
</h1>

h1{
    position: relative;
}
h1 img{
    cursor: pointer;
}
#information{
    display: none;
    position: absolute;
    left: 50px;
    width: 100px;
    height: 50px;
    font-size: 14px;
    background: red;
}
h1 img:hover + #information{
    display: block;
}

Check this link http://jsfiddle.net/amoljawale/G83WB/2/