Показать сообщение отдельно
  #2 (permalink)  
Старый 13.06.2020, 12:38
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Или вот еще нашел, но что бы в него можно было картинки вставлять

! function($, b, c, d) {
    'use strict';
    $.fn.liteTooltip = function(c) {
        var g, e = $(this),
            f = $.extend({}, $.fn.liteTooltip.default, c);
		e.each(function() {
			
			var evnt = ( typeof $(this).attr('data-tooltip-mouseover') !== 'undefined' ) ? 'mouseover' : ( typeof $(this).attr('data-tooltip-focus') !== 'undefined' ) ? 'focus' : 'mouseover';
			'mouseover' === evnt ? g = 'mouseout' : 'focus' === evnt && (g = 'blur')
			
            $(this).on(evnt, function() {
				$.fn.liteTooltip.removeElem(f)
                function m($) {
                    'top' === $.position ? r($) : 'left' === $.position ? p($) : 'right' === $.position ? o($) : 'bottom' === $.position ? q($) : n($), t($, i)
                }

                function n(c) {
                    function t($, b) {
                        'top' === $ ? (b.position = 'top', r(b)) : 'bottom' === $ ? (b.position = 'bottom', q(b)) : 'left' === $ ? (b.position = 'left', p(b)) : 'right' === $ && (b.position = 'right', o(b))
                    }
                    var d = {
                            left: 0,
                            right: 0,
                            top: 0,
                            bottom: 0
                        },
                        e = null,
                        g = 0,
                        h = c.triggerLeft - c.tlWidth + f.space;
                    h > g && (d.left = h);
                    var i = $(b).width(),
                        j = i - (c.triggerLeft + c.triggerW);
                    j > c.tlWidth && (d.right = j);
                    var k = c.triggerTop,
                        l = k;
                    l > c.tlHeight + f.space && (d.top = l);
                    var m = $(b).height(),
                        n = m - (c.triggerTop + c.triggerH);
                    n > c.tlHeight + f.space && (d.bottom = n);
                    var s = Math.max(d.left, d.right, d.top, d.bottom);
                    $.each(d, function($, b) {
                        b === s && (e = $)
                    }), t(e, c)
                }

                function o(c) {
                    var d = $(b).width(),
                        e = d - (c.triggerLeft + c.triggerW);
                    if (e < c.tlWidth + f.space) n(c);
                    else {
                        var g = u(c, 'sideRight'),
                            h = v(c);
                        s(h, g)
                    }
                }

                function p($) {
                    if ($.triggerLeft < $.tlWidth + f.space) n($);
                    else {
                        var b = u($, 'sideLeft'),
                            c = v($);
                        s(c, b)
                    }
                }

                function q(c) {
                    var d = $(b).height(),
                        e = d - (c.triggerTop + c.triggerH);
                    if (e < c.tlHeight + f.space) n(c);
                    else {
                        var g = u(c),
                            h = c.triggerTop + c.triggerH + f.space;
                        s(h, g)
                    }
                }

                function r($) {
                    if ($.triggerTop < $.tlHeight + f.space) n($);
                    else {
                        var b = u($),
                            c = $.triggerTop - $.tlHeight - f.space;
                        s(c, b)
                    }
                }

                function s(b, c) {
                    $('#tooltip').css({
                        top: b,
                        left: c
                    })
                }

                function t(b, c) {
                    c.bool ? 'top' === b.position ? 'left' === c.side ? (x('left', b), $('#tooltip').find('.tooltip-arrow').css({
                        left: b.triggerW / 2 - 8
                    })) : 'right' === c.side && (x('right', b), $('#tooltip').find('.tooltip-arrow').css({
                        left: b.tlWidth - (b.triggerW - 8)
                    })) : 'bottom' === b.position && ('left' === c.side ? (x('left', b), $('#tooltip').find('.tooltip-arrow').css({
                        left: b.triggerW / 2 - 8
                    })) : 'right' === c.side && (x('right', b), $('#tooltip').find('.tooltip-arrow').css({
                        left: b.triggerW + 8
                    }))) : x('center', b)
                }

                function u(c, d) {
                    if (d && 'sideLeft' === d) var e = c.triggerLeft - (c.tlWidth + f.space);
                    else if (d && 'sideRight' === d) var e = c.triggerLeft + (c.triggerW + f.space);
                    else var g = .5 * c.tlWidth - .5 * c.triggerW,
                        e = c.triggerLeft - g;
                    return e < 0 ? (e = c.triggerLeft, i.bool = !0, i.side = 'left') : e > $(b).width() && (e = $(b).width() - (c.triggerLeft + c.triggerW) - c.tlWidth, i.bool = !0, i.side = 'right'), e
                }

                function v($) {
                    var b = .5 * $.tlHeight - .5 * $.triggerH,
                        c = $.triggerTop - b;
                    return c < 0 && (c = $.triggerTop), c
                }

                function w() {
                    var b = $('<div class="tooltip animation-' + f.animation + '" id="tooltip"></div>');
                    $('body').append(b)
                }

                function x(b, c) {
                    var d, e;
                    'left' === b ? 'top' === c.position ? e = 'toptobottom' : 'bottom' === c.position && (e = 'bottomtotop') : 'right' === b ? 'top' === c.position || 'bottom' === c.position : b && 'center' !== b || ('top' === c.position ? e = 'toptobottom center' : 'bottom' === c.position && (e = 'bottomtotop center')), 'left' === c.position ? e = 'lefttoright' : 'right' === c.position && (e = 'righttoleft'), d = $('<div class="tooltip-arrow ' + e + ' "></div>'), $('#tooltip').append(d)
                }
                var c = $(this),
                    e = c.data( 'tooltip' + evnt[0].toUpperCase() + evnt.substring(1) ),
                    g = c.data('tooltipPosition') === d || '' === c.data('tooltipPosition') ? f.position : c.data('tooltipPosition'),
                    h = !1,
                    i = {
                        bool: !1,
                        side: ''
                    },
                    j = c.offset();				
                if (h = e !== d && '' !== e && null !== e) {
                    w();
                    var k = $('#tooltip');
                    k.html(e);
                    var l = {
                        triggerW: parseInt(c.width()) + parseInt(c.css('padding-left')) + parseInt(c.css('padding-right')),
                        triggerH: parseInt(c.height()) + parseInt(c.css('padding-top')) + parseInt(c.css('padding-bottom')),
                        triggerTop: j.top,
                        triggerLeft: j.left,
                        tlWidth: k.width() + parseInt(k.css('padding-left')) + parseInt(k.css('padding-right')),
                        tlHeight: k.height() + parseInt(k.css('padding-top')) + parseInt(k.css('padding-bottom')),
                        position: g
                    };
                    m(l)
                }
            }).on(g, function() {
                $.fn.liteTooltip.removeElem(f)
            })
        })
    }, $.fn.liteTooltip.removeElem = function(b) {
        $('body').find('#tooltip').length > 0 && $('#tooltip').removeClass('animation-' + b.animation).fadeOut(50).remove()
    }, $.fn.liteTooltip.default = {
        space: 20,
        animation: 'slide',
        position: 'top',
    }
}(jQuery, window, document);
$('.liteTooltip').liteTooltip();
Ответить с цитированием