Skip to content

Instantly share code, notes, and snippets.

@ideafm

ideafm/twTooltip.js

Last active January 4, 2016 18:49
Download ZIP

Revisions

  1. ideafm renamed this gist Jan 28, 2014. 1 changed file with 0 additions and 0 deletions.
    0 twTooltip → twTooltip.js
    View file
    File renamed without changes.
  2. ideafm created this gist Jan 28, 2014.
    110 changes: 110 additions & 0 deletions twTooltip
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    (function ($) {

    var defaultOptions = {
    'direction': 'top',
    'width': 100,
    'html': '',
    'offset': 10

    }
    $.fn.twTooltip = function (options) {
    var settings, offsetX, offsetY, offsetStartX, offsetStartY, tooltip, startCss, animateCss, posFix, mt = 0, mr = 0, mb = 0, ml = 0;

    if ( !! options && typeof options != 'object') options = {
    'html': options
    };
    settings = !! options ? $.extend({}, defaultOptions, options) : defaultOptions;

    posFix = $(this).css('position');
    if (posFix != 'fixed' || posFix != 'absolute' || posFix != 'relative') $(this).css('position', 'relative');

    if ($(this).is('input')) {
    $(this).wrap('<div class="tw-wrap"></div>');
    $(this).parent().append('<div class="tw-tooltip tw-' + settings.direction + '-direction">' + settings.html + '</div>');
    tooltip = $(this).next();
    mt = parseInt($(this).css('margin-top'));
    mr = parseInt($(this).css('margin-right'));
    mb = parseInt($(this).css('margin-bottom'));
    ml = parseInt($(this).css('margin-left'));

    } else {
    $(this).append('<div class="tw-tooltip tw-' + settings.direction + '-direction">' + settings.html + '</div>');
    tooltip = $('.tw-tooltip', this);
    }

    tooltip.on('mouseenter mouseleave', function () {
    return false;
    });

    switch (settings.direction) {
    case 'top':
    offsetStartX = ($(this).outerWidth() - settings.width) / 2;
    offsetX = offsetStartX;
    offsetY = -(tooltip.outerHeight() + settings.offset) - mt;
    offsetStartY = offsetY - 20;
    break;
    case 'bottom':
    offsetStartX = ($(this).outerWidth() - settings.width) / 2;
    offsetX = offsetStartX;
    offsetY = $(this).outerHeight() + settings.offset + mb;
    offsetStartY = offsetY + 20;
    break;
    case 'left':
    offsetX = -(settings.width + settings.offset) - ml;
    offsetStartX = offsetX - 20;
    offsetStartY = ($(this).outerHeight() - tooltip.outerHeight()) / 2;
    offsetY = offsetStartY;
    break;
    case 'right':
    offsetX = $(this).outerWidth() + settings.offset + mr;
    offsetStartX = offsetX + 20;
    offsetStartY = ($(this).outerHeight() - tooltip.outerHeight()) / 2;
    offsetY = offsetStartY;
    break;
    }


    startCss = {
    'display': 'block',
    'opacity': 0,
    'left': offsetStartX,
    'top': offsetStartY,
    'width': settings.width
    }
    animateCss = {
    'top': offsetY,
    'left': offsetX,
    'opacity': 1
    }




    function tooltipShow() {
    tooltip.css(startCss).animate(animateCss, {
    'queue': false,
    'duration': 100
    });
    }

    function tooltipHide() {
    tooltip.animate(startCss, {
    'queue': false,
    'duration': 100,
    'complete': function () {
    $(this).css('display', 'none');
    }
    });
    }

    $(this).mouseover(function () {
    tooltipShow();
    }).mouseout(function () {
    tooltipHide();
    });
    }

    $('[data-tw-tooltip]').each(function () {
    $(this).twTooltip($(this).data('tw-tooltip'));
    });
    })(jQuery);