[jQuery] Tooltip (estilizável)

[Guest md5]

Meu primeiro tooltip ... Fiquei feliz com o resultado. É simples, de fácil uso ...

 

 

$(document).ready(function() {
    $('.tooltip').mouseover(function(event) {
        var tooltip = document.createElement('SPAN');
        tooltip.id = 'tooltip';
        tooltip.innerHTML = event.target.getAttribute('tooltip');
        document.body.appendChild(tooltip);
        $('#tooltip').css('top', '' + (event.pageY + 5) + 'px');
        $('#tooltip').css('left', '' + (event.pageX + 5) + 'px');
    }).mousemove(function(event) {
        $('#tooltip').css('top', '' + (event.pageY + 5) + 'px');
        $('#tooltip').css('left', '' + (event.pageX + 5) + 'px');
    }).mouseout(function(event) {
        var tooltip = document.getElementById('tooltip');
        document.body.removeChild(tooltip);
    });
});

Exemplo de uso:

 

<h1 class="tooltip" tooltip="Just a example.">Hover this.</h1>

Exemplo de estilização:

 

<style>
 
    @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
        
    span#tooltip {
        position: absolute; /* OBRIGATÓRIO */
        font-family: Roboto Condensed;
        color: #FFFFFF;
        text-align: center;
        padding-top: 5px;
        padding-left: 12.5px;
        padding-right: 12.5px;
        padding-bottom: 5px;
        border-radius: 5px 5px 5px 5px;
        background: rgba(45, 0, 78, 0.50);
    }
 
</style>

Exemplo demonstrativo: http://aryef.16mb.com/tooltip/index.php

[Aeffy]

faltou só um cursor: default; -q

ficou dahora, parabéns!

[Guest md5]

faltou só um cursor: default; -q

ficou dahora, parabéns!

 

cursor onde? Não tem como deixar o mouse em cima do tooltip .-.