Show Text on Image Hover

Question

I'm trying to have an image description shown when hovering over the image which is placed in a div (#web01).

I've been toying with the mouseenter/mouseleave and have been able to get text shown but when I link it to a div it doesn't seem to work.

It's probably dead easy but i can't see what I'm doing wrong.

$(document).ready(function () {
    $("#web01").mouseenter(function () {
        $("#titel").html('<p class="titel">description</p>');
    });
    $("#web01").mouseleave(function () {
        $("#titel").html('<p class="titel"></p>');
    });
})

Answer 1

Assuming you meant to name your element title1 and not titel1 (spelled incorrectly), simply changing the id to title1 fixes the problem. I've given a working example below.

Working Example

Answer 2

In the example on http://api.jquery.com/mouseenter/ I saw them use this in the function.

$(document).ready(function(){
 $("#web01").mouseenter(function(){
  $("#titel",this).html('description'); 
 });

 $("#web01").mouseleave(function() { 
  $("#titel",this).html(''); 
 });
});

Answer 3

I think you need something like this:

http://jqueryui.com/tooltip/

Answer 4

<div id="web01" title="myTitle">...</div> or <img src="..." title="myTitle"/> will show the native browser title (tooltip).