$(document).ready(function(){
  $('.tooltip')
    .hover(
      function () {

        var _title = $(this).attr('title'),
            _class = $(this).attr('displayclass');
        $(this).attr('title', '');
        $(this).append('<p class="' + _class + '">' + _title + '</p>')
      },
      function () {
        var _title = $('p', this).html();
        $(this).attr('title', _title);
        $('p', this).remove();
      });   
});

/*
// Prototype
document.observe('dom:loaded', function () {
  $$('.tooltip')
    .invoke('observe', 'mouseover', function (e) {
      var _e      = Event.element(e),
          _title  = _e.title,
          _class  = _e.getAttribute('displayclass');
          
      _e.title  = '';
      _e.insert('<p class="'+_class+'">' + _title + '</p>');
    })
    .invoke('observe', 'mouseout', function (e) {
      var _e      = Event.element(e);
      _e.title  = _e.select('p')[0].innerHTML;
      _e.down('p').remove();
    });
});

//Vanilla JS (standards compliant)
document.addEventListener('DOMContentLoaded', function () {

  var _tooltips = document.getElementsByClassName('tooltip')
  
  for( var i = 0, _len = _tooltips.length; i < _len; i++ ) {
    _tooltips[i]
      .addEventListener('mouseover', function () {
        var _title  = this.title, 
            _class  = this.getAttribute('displayclass'),
            _tip    = document.createElement('p');
            _tip.className  = _class;        
            _tip.innerHTML  = _title;

        this.title  = '';    
        this.appendChild(_tip);
      }, false);
    
    _tooltips[i]      
      .addEventListener('mouseout', function () {
        var _title  = this.lastChild.innerHTML, 
            _child  = this.lastChild;
            this.removeChild(_child);
      }, false);
  }
}, false);
*/