Title tag to Html text

global replace from title attribute

by brasofilo

HTML

<div class="all-blogs"> <a href="#" title="- - One Element - -">•</a>
 <a href="#" title="- - Another One - -">•</a>

</div>

CSS

.all-blogs {
    color: #f00;
    font-size: 5em;
}
.all-blogs a {
    text-decoration: none;
}
#tooltip {
    background-color: #0cc;
    padding: 10px;
    text-align: center;
}

JavaScript

$('body').append('<div id="tooltip"></div>');
$('#tooltip').hide();
var $tooltip = $('#tooltip');
$('.all-blogs a').each(function () {
    var $this = $(this),
        $title = this.title;
    $title = $title.replace(/- -/g, '<span style="color:#0f3;font-size:2em"> - - - </span>');

    $this.hover(function () {
        this.title = '';
        $tooltip.html($title).show();
    }, function () {
        this.title = $title;
        $tooltip.html('').hide();
    });

    $this.mousemove(function (e) {
        $tooltip.css({
            top: e.pageY - 25,
            left: e.pageX + 20
        });
    });
});