Html tags not rendering inside tooltip

Question

I am using .html() to fetch content of a span tag and display it as tool-tip, But html tags inside span tag is directly displayed inside tool-tip without rendering.

<div>
<a href="#">Parent
<span>
<strong>It is a long established</strong> The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to usi<em>ng 'Content here, content here', m</em>aking it look like readable English. Many desktop publishing packages
</span>
</a>
</div>

JavaScript

$(this).hover(function(){
        // Hover over code

        var title = $(this).find('span').html();

        if(title){
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
    }
}, function() {
        // Hover out code

        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});

Fiddle: http://jsfiddle.net/qA88d/

Answer 1

You're using text(). Check the working demo here: http://jsfiddle.net/qA88d/1/

Change:

.text(title)

to

.html(title)