function show_tooltip(element, text, options) {
    options = options || {};

    var html = $('<div/>').text(text).html().replace(/\n/g, '<br>');

    var tooltip = $('#tool-tip-container');

    if (!tooltip.length) {
        tooltip = $('<div id="tool-tip-container"/>').hide().appendTo(document.body);
    }

    var div  = $('<div class="tool-tip"/>');
    var body = $('<div class="tool-tip-body"/>').appendTo(div);

    $('<div class="tl"/>').appendTo(body);
    $('<div class="tr"/>').appendTo(body);

    var w  = $('<div class="w"/>').appendTo(body);
    var w1 = $('<div class="w-1"/>').appendTo(w);

    $('<p/>').html(html).appendTo(w1);

    $('<div class="bl"/>').appendTo(body);
    $('<div class="br"/>').appendTo(body);

    $('<div class="tool-pointer"/>').appendTo(body);

    var offset = $(element).offset();

    if (options.className) {
        div.addClass(options.className);
    }

    tooltip.css({
        position: 'absolute',
        zIndex: '100',
        top: offset.top,
        left: offset.left
    });

    tooltip.empty().append(div).show();
}

function hide_tooltip() {
    $('#tool-tip-container').hide();
}

//############################################################

jQuery.fn.tooltip = function(text) {
  jQuery(this).hover(function() { show_tooltip(this, text); },
                     function() { hide_tooltip(); });

  return this;
};

jQuery.fn.title_tooltip = function() {
  jQuery(this).each(function(i, element) {
    var text = jQuery(this).attr('title');
    jQuery(this).removeAttr('title').tooltip(text);
  });

  return this;
};