div styles in html page

Question

All,

How to make the div more presentable in the below code. ie, on mouseover the div should look like as same as title attribute or even better And the text on it should also look presentable

 <style type="text/css">
 #div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $(window).mouseover(function(event){
    $("#div1").css({'top': event.pageY, 'left': event.pageX});  
});
});
</script>
<div id="div1">move me</div>

Thanks.....

Answer 1

How about this:

<style type="text/css">
 #div1 {
 font-size: 12px;
 font-family: helvetica;
 background-color: #ffffaa;
 color: black;
 position: absolute;
 border-left: solid 1px #d0d0d0;
 border-top: solid 1px #d0d0d0;
 border-right: solid 1px #a0a0a0;
 border-bottom: solid 1px #a0a0a0;
 padding: 1px;
}
</style>

It looks a bit like the title tool tip (but be aware, that every user can have a different configuration via OS or browser) and it adds a light 3d effect. If you are using CSS3, you can also use gradients, round corners and shadows, which can look nice.

Answer 2

How about this:

$(function(){
 $(window).mouseover(function(event){
    $("#div1").css({'color': '#0000ff'});
    $("#div1").css({'font-weight': 'bold'});
    $("#div1").css({'background-color': '#00ff00'});
});
});

Answer 3

I think you should switch from "mouseover" to "mousemove", because it's a bit of a smoother effect:

$(window).mousemove(function(event){
    $("#div1").css({'top': event.pageY, 'left': event.pageX});  
});

As for the look, here's the Windows tooltip look (if that's what you wanted):

<style type="text/css">
    #div1
    {
        color: #000;
        background: #FDFFC9;
        border: 1px solid #000;
        font: 12px Arial, sans-serif;
        padding: 5px;
        position: absolute;
    }
</style>

And here's something you might like:

<style type="text/css">
    #div1
    {
        color: #FFF;
        background: #5289BF;
        border: 1px solid #369;
        border-width: 0 2px 2px 0;
        font: bold 15px Arial, serif;
        padding: 10px;
        position: absolute;
    }
</style>