(function($) { $.fn.tooltip = function(settings) { // Configuration setup config = { 'dialog_content_selector' : 'div.tooltip_description', 'animation_distance' : 50, 'opacity' : 0.85, 'arrow_left_offset' : 70, 'arrow_top_offset' : 50, 'arrow_height' : 20, 'arrow_width' : 20, 'animation_duration_ms' : 300, 'event_in':'mouseover', 'event_out':'mouseout' }; if (settings) $.extend(config, settings); /** * Apply interaction to all the matching elements **/ this.each(function() { $(this).bind(config.event_in,function(){ _show(this); }) .bind(config.event_out,function(){ _hide(this); }) }); /** * Positions the dialog box based on the target * element's location **/ function _show(target_elm) { var dialog_content = $(target_elm).find(config.dialog_content_selector); var dialog_box = _create(dialog_content); var is_top_right = $(target_elm).hasClass("tooltiptopright"); var is_bottom_right = $(target_elm).hasClass("tooltipbottomright"); var is_top = $(target_elm).hasClass("tooltiptop"); var is_bottom = $(target_elm).hasClass("tooltipbottom"); var has_position = is_top_right || is_bottom_right || is_top || is_bottom; var position; var target_elm_position = $(target_elm).offset(); // coming from the top right if (is_top_right || !has_position && (target_elm_position.top < $(dialog_box).outerHeight() && target_elm_position.top >= config.arrow_top_offset)) { position = { start : { left : target_elm_position.left + $(target_elm).outerWidth() + config.animation_distance, top : target_elm_position.top + ($(target_elm).outerHeight() / 2) - config.arrow_top_offset }, end : { left : target_elm_position.left + $(target_elm).outerWidth(), top : target_elm_position.top + ($(target_elm).outerHeight() / 2) - config.arrow_top_offset }, arrow_class : "div.left_arrow" } } // coming from the bottom right else if (is_bottom_right || !has_position && (target_elm_position.left < config.arrow_left_offset + $(target_elm).outerWidth() && target_elm_position.top > $(dialog_box).outerHeight())) { position = { start : { left : target_elm_position.left + $(target_elm).outerWidth() + config.animation_distance, top : target_elm_position.top + ($(target_elm).outerHeight() / 2) + config.arrow_top_offset - $(dialog_box).outerHeight() + config.arrow_height }, end : { left : target_elm_position.left + $(target_elm).outerWidth(), top : target_elm_position.top + ($(target_elm).outerHeight() / 2) + config.arrow_top_offset - $(dialog_box).outerHeight() + config.arrow_height }, arrow_class : "div.left_arrow" } $(dialog_box).find("div.left_arrow").css({ top: $(dialog_box).outerHeight() - (config.arrow_top_offset * 2) + "px" }); } // coming from the top else if (is_top || !has_position &&(target_elm_position.top + config.animation_distance > $(dialog_box).outerHeight() && target_elm_position.left >= config.arrow_left_offset)) { position = { start : { left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset, top : target_elm_position.top - config.animation_distance - $(dialog_box).outerHeight() }, end : { left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset, top : target_elm_position.top - $(dialog_box).outerHeight() + config.arrow_height }, arrow_class : "div.down_arrow" } } // coming from the bottom else if (is_bottom || !has_position &&(target_elm_position.top + config.animation_distance < $(dialog_box).outerHeight())) { position = { start : { left : target_elm_position.left + ($(target_elm).outerWidth() / 2) - config.arrow_left_offset, top : target_elm_position.top + $(target_elm).outerHeight() + config.animation_distance }, &nb