individueller Tooltip mit CSS3, unterdrückter Standard mit jQuery

http://jsfiddle.net/rodneyrehm/jXefF/4/

by Jens Grochtdreis

HTML

<div title="There are two bubbles: One originating directly from the title-attribute, one via pseudo element.">Hover on me to see the bubble(s)</div>

<p>Question: How can I suppress the original title-bubble?</p>

CSS

div[title]{
    position: relative;
    display: inline-block;
    margin: 50px;
}

.js div[title]:hover:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    width: 150px;
    padding: 10px;
    background: #3C3F47;
    color: #DDD;
    text-align: left;
    
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

JavaScript

$(document.body).addClass('js');

var events = {
    mouseenter: function(e) {
        var $this = $(this);
        $this.attr('data-title', $this.attr('title')).attr('title', '');
    },
    mouseout: function(e) {
        var $this = $(this);
        $this.attr('title', $this.attr('data-title'));
    }
};

$(document).on(events, 'div[title]');