JS:UI-Component-tooltip global singleton.js

JS:UI-Component-tooltip global singleton.js

<script type="text/javascript">
// ==========================================================================
//   Tooltips
// ==========================================================================
(function () {
    var $tooltip = $('<div />');

    function showHideHandler(event) {
        /*jshint validthis:true */
        if (event.type === 'mouseleave') {
            $tooltip.remove();
            return;
        }

        var $el = $(this);
        var title = $el.data('tooltip');
        var place = $el.data('place') || 'top';
        var style = $el.data('style') || 'dark';

        $tooltip.attr('class', 'tooltip ' + place + ' ' + style).text(title).appendTo(document.body);
        var tWidth = $tooltip.outerWidth();
        var tHeight = $tooltip.outerHeight();
        var pos = $el.offset();
        var elWidth = $el.outerWidth();
        var elHeight = $el.outerHeight();

        switch (place) {
            case 'top':
                $tooltip.css({
                    top: pos.top - tHeight,
                    left: pos.left + Math.round(elWidth / 2) - Math.round(tWidth / 2)
                });
                break;
            case 'left':
                $tooltip.css({
                    top: pos.top + Math.round(elHeight / 2) - Math.round(tHeight / 2),
                    left: pos.left - tWidth
                });
                break;
            case 'right':
                $tooltip.css({
                    top: pos.top + Math.round(elHeight / 2) - Math.round(tHeight / 2),
                    left: pos.left + elWidth
                });
                break;
            case 'bottom':
                $tooltip.css({
                    top: pos.top + elHeight,
                    left: pos.left + Math.round(elWidth / 2) - Math.round(tWidth / 2)
                });
                break;
        }
    }

    $('[data-tooltip]').on('mouseenter mouseleave', showHideHandler);
}());
</script>

<style>
/* Tooltips */
.tooltip { position: absolute; padding: 10px 20px; max-width: 300px; color: #fff; background: #3a3c47; text-shadow: -1px -1px 0 #000;}
.tooltip.light { color: #3a3c47; background: #fff; text-shadow: none; }
.tooltip:after { content: ""; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }

.tooltip.top { margin-top: -15px; }
.tooltip.top:after { bottom: -8px; left: 50%; margin-left: -8px; border-top-color: #3a3c47; border-width: 8px 8px 0; }
.tooltip.light.top:after { border-top-color: #fff; }

.tooltip.right { margin-left: 15px; }
.tooltip.right:after { top: 50%; left: -8px; margin-top: -8px; border-right-color: #3a3c47; border-width: 8px 8px 8px 0; }
.tooltip.light.right:after { border-right-color: #fff; }

.tooltip.left { margin-left: -15px; }
.tooltip.left:after { top: 50%; right: -8px; margin-top: -8px; border-left-color: #3a3c47; border-width: 8px 0 8px 8px; }
.tooltip.light.left:after { border-left-color: #fff; }

.tooltip.bottom { margin-top: 15px; }
.tooltip.bottom:after { top: -8px; left: 50%; margin-left: -8px; border-bottom-color: #3a3c47; border-width: 0 8px 8px; }
.tooltip.light.bottom:after { border-bottom-color: #fff; }

</style>