how to set image title attribute using jquery?

Question

here my code-

---
<ul>
                <li id="d1"><a href="images/soluinfo1.jpg"><img src="images/menu_hosp.jpg" border="0"></a></li>
                <li id="d2"><a href="images/soluinfo2.jpg"><img src="images/menu_edu.jpg" border="0"></a></li>
                <li id="d3"><a href="images/soluinfo3.jpg"><img src="images/menu_enter.jpg" border="0"></a></li>
                <li id="d4"><a href="images/soluinfo4.jpg"><img src="images/menu_retail.jpg" border="0"></a></li>
                <li id="d5"><a href="images/soluinfo5.jpg"><img src="images/menu_health.jpg" border="0"></a></li>
                <li id="d6"><a href="images/soluinfo6.jpg"><img src="images/menu_real.jpg" border="0"></a></li>
                <li id="d7"><a href="images/soluinfo7.jpg"><img src="images/menu_tel.jpg" border="0"></a></li>
            </ul>

Jquery function-

function imgchange()
    {
        $('.smenu li').mouseover( function(){
        var src = $(this).find('a').attr('href');
        $('.hbg').css('background-image', 'url(' + src + ')');
        });     
    }

this is working fine background image is getting changed but I want to set the title attribute of the image too, so that when user goes over there tooltip shoud come.like-
<img src="---" title="my tootip info" >

Answer 1

function imgchange()
    {
        $('.smenu li').mouseover( function(){
            var src = $(this).find('a').attr('href');
            $('.hbg').css('background-image', 'url(' + src + ')');

            $('.hbg').attr('title', 'my tootip info'); // <= DO THIS

        });     
    }

EDIT
I suppose you are making some sort of slideshow, and $('.hbg') is the slide view port.
So you should set the title for this element. I edited the code to reflect this.

Answer 2

Short answer: you can't do that using CSS.

The title attribute is supposed to convey information in case the image is not there and cannot be set in CSS. It needs to be part of the HTML mark-up.