[jQuery] Abbreviation tooltips

by Jean-Baptiste Audras

HTML

<div id="main">
    <p>Parlons un peu d'accessibilité.</p>
    <p>Consulter le <abbr title="Référentiel général d'accessibilité pour les administrations">Rgaa</abbr>, c'est in-dis-pen-sable.</p>
    <p>En effet, c'est vraiment une question éthique plus que législative.</p>
    <p>En effet, c'est très très important tout ça car vraiment trop peu d'administrations sont efficaces et respectueuses sur ce point…
</div>

CSS

div#main {
    float: right;
    margin-top: 50px;
    width: 200px;
}
abbr {
    font-variant: small-caps;
    border-bottom: 1px dotted #ccc;
    cursor: help;
}
div.abr {
    position: absolute;
    background: #ffe;
    color: red;
    font-variant: normal;
    padding: 5px;
    margin: 20px 0 0 0;
    display:block;
    width: 100x;
    border: 1px solid black;
}

JavaScript

$(document).ready(function() {
    $("abbr").hover(
        function() {
           var abr = $(this).attr('title');
//           $(this).removeAttr('title');
           $(this).append($('<div class="abr">' + abr + '</div>'));
    },
           function() {
               $(this).find('.abr').hide();                    
    }
    );
});