jquery.simpleTooltip.js

;(function ($, document, window) {

    'use strict';

    $.fn.simpleTooltip = function (options) {
        if (!this.length) {
            return this;
        }

        var settings = $.extend({
            duration: 100,
            className: 'tooltip_window',
            zIndex: 999
        }, options);
        var $that = this;
        var $tooltipWindow;
        var toggle = false;
        var showEvent = 'click.simpletooltip.show';
        var hideEvent = 'click.simpletooltip.hide';
        var resizeEvent = 'resize.simpletooltip';
        var timeoutID;

        $(document).on(hideEvent, function(e) {
            if (toggle) {
                $tooltipWindow.stop().fadeOut(settings.duration, function() {
                    var i, iz;

                    toggle = false;
                    $tooltipWindow.remove();
                    $tooltipWindow = null;

                    for (i = 0, iz = $that.length; i < iz; i++) {
                        if (e.target == $that[i]) {
                            $(e.target).trigger(showEvent);
                            break;
                        }
                    }
                });
            }
        });

        $(window).on(resizeEvent, function() {
            if (!timeoutID) {
                timeoutID = setTimeout(function() {
                    $(document).trigger(hideEvent);

                    clearTimeout(timeoutID);
                    timeoutID = null;
                }, 300);
            }
        });

        return $that.each(function () {
            var $this;
            var $tooltip;
            var href;
            var offset;
            var top;
            var left;
            var width;
            var height;
            var tooltipWidth;
            var tooltipHeight;

            $this = $(this);
            href = $this.attr('href');

            if (typeof href !== 'undefined') {
                if (href.indexOf('#') === 0) {
                    $tooltip = $(href);

                    if ($tooltip.length) {
                        $tooltip.hide();

                        width = $this.outerWidth(true);
                        height = $this.outerHeight(true);

                        $this.on(showEvent, function (e) {
                            e.preventDefault();

                            if (!toggle) {
                                toggle = true;

                                offset = $(e.target).offset();
                                top = offset.top;
                                left = offset.left;

                                $tooltipWindow = $tooltip
                                    .clone()
                                    .removeAttr('id')
                                    .addClass(settings.className)
                                    .hide()
                                    .appendTo('body');

                                tooltipWidth = $tooltipWindow.outerWidth(true);
                                tooltipHeight = $tooltipWindow.outerHeight(true);

                                $tooltipWindow.css({
                                    top: top - tooltipHeight - height,
                                    left: left + (width * 0.5) - (tooltipWidth * 0.5),
                                    position: 'absolute',
                                    zIndex: settings.zIndex
                                }).fadeIn(settings.duration);
                            }
                        });
                    }
                }
            }
        });
    };

})(jQuery, document, this);

<dl>
    <dt><a href="#hoge">hogehoge</a></dt>
    <dd id="hoge"></dd>
</dl>

$(function(){
    $('#hoge').simpleTooltip();
});