Question

I’d like to show the title (attr)
only when the text is hovered.

The problem is that here we are talking about hovering block elements like p and h1.

So my question is: how to make title attribute appear (or any other event) only when the text is targeted (not all the width of the element)

Example

With jQuery so far I have:

THIS demo

$('h1, p').each(function(){

    $(this).wrapInner('<span></span>');
    var spann = $(this).children('span');
    var span = spann.width();
    $(this).children('span').contents().unwrap();

     $(this).css({
         width: span+'px',
     });

    if ( $(this).css('text-align') == 'center' ){   
        $(this).css({
            marginLeft:'auto',
            marginRight:'auto'
        });
    }

});

I actually add the span but temporally, just to make the position calculations.

But now the backgrounds are missing…. argh.

Answer 1

A dirty trick is inserting a span inside the elements. This isn’t visible (it’s inline), but has a width so that it just fits the text only.

This is an example for the p:

<p>
    <span title="I am a paragraph">Paragraph</span>
</p>

http://jsfiddle.net/J6bUw/1/