jQuery Tooltip (Всплывающая подсказка)

вопрос

Есть два скрипта, в одном есть функция так сказать переворачивания всплывающей подсказки возле края дисплея, но скрипт большой, и второй скрипт поменьше но без этой функции. Как можно с первого скрипта добавить эту функцию во второй?

СКРИПТ С ФУНКЦИЕЙ

/*
 * jQuery Tooltip plugin 1.3
 *
 * http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
 * http://docs.jquery.com/Plugins/Tooltip
 *
 * Copyright (c) 2006 - 2008 J&#246;rn Zaefferer
 *
 * $Id: jquery.tooltip.js 5741 2008-06-21 15:22:16Z joern.zaefferer $
 * 
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
 
;(function($) {
    
        // the tooltip element
    var helper = {},
        // the current tooltipped element
        current,
        // the title of the current element, used for restoring
        title,
        // timeout id for delayed tooltips
        tID,
        // IE 5.5 or 6
        IE = $.browser.msie && /MSIE\s(5\.5|6\.)/.test(navigator.userAgent),
        // flag for mouse tracking
        track = false;
    
    $.tooltip = {
        blocked: false,
        defaults: {
            delay: 200,
            fade: false,
            showURL: true,
            extraClass: "",
            top: 15,
            left: 15,
            id: "tooltip"
        },
        block: function() {
            $.tooltip.blocked = !$.tooltip.blocked;
        }
    };
    
    $.fn.extend({
        tooltip: function(settings) {
            settings = $.extend({}, $.tooltip.defaults, settings);
            createHelper(settings);
            return this.each(function() {
                    $.data(this, "tooltip", settings);
                    this.tOpacity = helper.parent.css("opacity");
                    // copy tooltip into its own expando and remove the title
                    this.tooltipText = this.title;
                    $(this).removeAttr("title");
                    // also remove alt attribute to prevent default tooltip in IE
                    this.alt = "";
                })
                .mouseover(save)
                .mouseout(hide)
                .click(hide);
        },
        fixPNG: IE ? function() {
            return this.each(function () {
                var image = $(this).css('backgroundImage');
                if (image.match(/^url\(["']?(.*\.png)["']?\)$/i)) {
                    image = RegExp.$1;
                    $(this).css({
                        'backgroundImage': 'none',
                        'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
                    }).each(function () {
                        var position = $(this).css('position');
                        if (position != 'absolute' && position != 'relative')
                            $(this).css('position', 'relative');
                    });
                }
            });
        } : function() { return this; },
        unfixPNG: IE ? function() {
            return this.each(function () {
                $(this).css({'filter': '', backgroundImage: ''});
            });
        } : function() { return this; },
        hideWhenEmpty: function() {
            return this.each(function() {
                $(this)[ $(this).html() ? "show" : "hide" ]();
            });
        },
        url: function() {
            return this.attr('href') || this.attr('src');
        }
    });
    
    function createHelper(settings) {
        // there can be only one tooltip helper
        if( helper.parent )
            return;
        // create the helper, h3 for title, div for url
        helper.parent = $('<div id="' + settings.id + '"><h3></h3><div class="body"></div><div class="url"></div></div>')
            // add to document
            .appendTo(document.body)
            // hide it at first
            .hide();
            
        // apply bgiframe if available
        if ( $.fn.bgiframe )
            helper.parent.bgiframe();
        
        // save references to title and url elements
        helper.title = $('h3', helper.parent);
        helper.body = $('div.body', helper.parent);
        helper.url = $('div.url', helper.parent);
    }
    
    function settings(element) {
        return $.data(element, "tooltip");
    }
    
    // main event handler to start showing tooltips
    function handle(event) {
        // show helper, either with timeout or on instant
        if( settings(this).delay )
            tID = setTimeout(show, settings(this).delay);
        else
            show();
        
        // if selected, update the helper position when the mouse moves
        track = !!settings(this).track;
        $(document.body).bind('mousemove', update);
            
        // update at least once
        update(event);
    }
    
    // save elements title before the tooltip is displayed
    function save() {
        // if this is the current source, or it has no title (occurs with click event), stop
        if ( $.tooltip.blocked || this == current || (!this.tooltipText && !settings(this).bodyHandler) )
            return;

        // save current
        current = this;
        title = this.tooltipText;
        
        if ( settings(this).bodyHandler ) {
            helper.title.hide();
            var bodyContent = settings(this).bodyHandler.call(this);
            if (bodyContent.nodeType || bodyContent.jquery) {
                helper.body.empty().append(bodyContent)
            } else {
                helper.body.html( bodyContent );
            }
            helper.body.show();
        } else if ( settings(this).showBody ) {
            var parts = title.split(settings(this).showBody);
            helper.title.html(parts.shift()).show();
            helper.body.empty();
            for(var i = 0, part; (part = parts[i]); i++) {
                if(i > 0)
                    helper.body.append("<br/>");
                helper.body.append(part);
            }
            helper.body.hideWhenEmpty();
        } else {
            helper.title.html(title).show();
            helper.body.hide();
        }
        
        // if element has href or src, add and show it, otherwise hide it
        if( settings(this).showURL && $(this).url() )
            helper.url.html( $(this).url().replace('http://', '') ).show();
        else 
            helper.url.hide();
        
        // add an optional class for this tip
        helper.parent.addClass(settings(this).extraClass);

        // fix PNG background for IE
        if (settings(this).fixPNG )
            helper.parent.fixPNG();
            
        handle.apply(this, arguments);
    }
    
    // delete timeout and show helper
    function show() {
        tID = null;
        if ((!IE || !$.fn.bgiframe) && settings(current).fade) {
            if (helper.parent.is(":animated"))
                helper.parent.stop().show().fadeTo(settings(current).fade, current.tOpacity);
            else
                helper.parent.is(':visible') ? helper.parent.fadeTo(settings(current).fade, current.tOpacity) : helper.parent.fadeIn(settings(current).fade);
        } else {
            helper.parent.show();
        }
        update();
    }
    
    /**
     * callback for mousemove
     * updates the helper position
     * removes itself when no current element
     */
    function update(event)    {
        if($.tooltip.blocked)
            return;
        
        if (event && event.target.tagName == "OPTION") {
            return;
        }
        
        // stop updating when tracking is disabled and the tooltip is visible
        if ( !track && helper.parent.is(":visible")) {
            $(document.body).unbind('mousemove', update)
        }
        
        // if no current element is available, remove this listener
        if( current == null ) {
            $(document.body).unbind('mousemove', update);
            return;    
        }
        
        // remove position helper classes
        helper.parent.removeClass("viewport-right").removeClass("viewport-bottom");
        
        var left = helper.parent[0].offsetLeft;
        var top = helper.parent[0].offsetTop;
        if (event) {
            // position the helper 15 pixel to bottom right, starting from mouse position
            left = event.pageX + settings(current).left;
            top = event.pageY + settings(current).top;
            var right='auto';
            if (settings(current).positionLeft) {
                right = $(window).width() - left;
                left = 'auto';
            }
            helper.parent.css({
                left: left,
                right: right,
                top: top
            });
        }
        
        var v = viewport(),
            h = helper.parent[0];
        // check horizontal position
        if (v.x + v.cx < h.offsetLeft + h.offsetWidth) {
            left -= h.offsetWidth + 20 + settings(current).left;
            helper.parent.css({left: left + 'px'}).addClass("viewport-right");
        }
        // check vertical position
        if (v.y + v.cy < h.offsetTop + h.offsetHeight) {
            top -= h.offsetHeight + 20 + settings(current).top;
            helper.parent.css({top: top + 'px'}).addClass("viewport-bottom");
        }
    }
    
    function viewport() {
        return {
            x: $(window).scrollLeft(),
            y: $(window).scrollTop(),
            cx: $(window).width(),
            cy: $(window).height()
        };
    }
    
    // hide helper and restore added classes and the title
    function hide(event) {
        if($.tooltip.blocked)
            return;
        // clear timeout if possible
        if(tID)
            clearTimeout(tID);
        // no more current element
        current = null;
        
        var tsettings = settings(this);
        function complete() {
            helper.parent.removeClass( tsettings.extraClass ).hide().css("opacity", "");
        }
        if ((!IE || !$.fn.bgiframe) && tsettings.fade) {
            if (helper.parent.is(':animated'))
                helper.parent.stop().fadeTo(tsettings.fade, 0, complete);
            else
                helper.parent.stop().fadeOut(tsettings.fade, complete);
        } else
            complete();
        
        if( settings(this).fixPNG )
            helper.parent.unfixPNG();
    }
    
})(jQuery);

СКРИПТ БЕЗ ФУНКЦИИ

(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:10,yOffset:25,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("slow")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);

Ответил: ПафНутиЙ

Всё гораздо проще, нужно просто использовать другой скрипт))):

function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
        var my_tooltip = $("#"+name+i);

        if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){

        $(this).removeAttr("title").mouseover(function(){
                    my_tooltip.css({opacity:0.95, display:"none"}).fadeIn(100);
        }).mousemove(function(kmouse){
                var border_top = $(window).scrollTop();
                var border_right = $(window).width();
                var left_pos;
                var top_pos;
                var offset = 15;
                if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
                    left_pos = kmouse.pageX+offset;
                    } else{
                    left_pos = border_right-my_tooltip.width()-offset;
                    }
                my_tooltip.css({left:left_pos, top:kmouse.pageY+offset});
        }).mouseout(function(){
                my_tooltip.css({left:"-9999px"});
        });

        }

    });
}

$(function(){
    //вызов тултипов
    simple_tooltip(".ttp","tooltip");
});

CSS (навскидку взял что под руку попалось):

.tooltip {
     position:absolute;
    left:-2000px;
    top: -2000px;
    max-width:450px;
    background: #fff;  
    border: solid 1px #e5e5e5;
    }
    .tooltip p {
        margin: 0;
        color: #303030;
        padding: 3px 5px;  
        border: solid 1px #e5e5e5;
        font: normal 12px/20px Tahoma, sans-serif;
        }

<script> window.addEventListener('load', ()=> { $('#category').on('change', function() { var value = $(this).val(); if ($.isArray(value)) { ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 ); } else { ShowOrHideEx("xfield_holder_year", value == 1 || value==2); } }) }); </script> year доп поле . 1 и 2 катег

Fancybox.bind("[data-highslide]", { groupAttr: 'data-highslide', idle:2000, Thumbs: false, caption: (fancybox, slide) => { if( slide.thumbEl && slide.thumbEl.alt ) { return slide.thumbEl.alt } } });

14 комментариев

Юзер

199

kovalenko3331 - 2015-02-2819 января 2012 10:32 - #3185

Паша, помоги разобраться, подключил скрипт в main.tpl

<script type="text/javascript" src="{THEME}/js/tooltip.js"></script>
<script>
$(function(){
    //вызов тултипов
    simple_tooltip(".ttp","tooltip");
});
</script>

блок где хочу выводить взял в

<div class="ttp"></div>

и пишет "undefined" и выводит стандартный title.

1KoTuK - 2015-02-2819 января 2012 11:01 - #3186

У вас проблема вот здесь:

Цитата: kovalenko3331

simple_tooltip(".ttp","tooltip");

скажем так - вы не указали на какой тег будет работать подсказка
simple_tooltip(".ttp a","tooltip");

видите мы в строке вставили a и теперь предположим установив тултип таким образом

<a href="#" title="ваш всплывающий текст"

всё будет отлично работать

т.е. дожно получиться вот так:


<script>
$(function(){
    //вызов тултипов
    simple_tooltip(".ttp a","tooltip");
});
</script>

Админ

3457

ПафНутиЙ - 2015-02-2819 января 2012 16:43 - #3193

Тултип обрабатывает тег title и если этот тег не определён - он будет выдавать undefined

<div class="ttp" title="текст"></div>

Каков вопрос - таков и ответ. Просто помните об этом.

PHP-developer

1783

Sander - 2015-02-2819 января 2012 18:55 - #3201

Мне скрипт не нравится.
Он сразу обрабатывает все тайтлы у объектов с классом ttp, а не при наведении курсора.

Нет необходимости использовать функцию, можно обойтись и без нее.
Но еще лучше делать через $.fn.simple_tooltip

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

ПафНутиЙ - 2015-02-2819 января 2012 19:12 - #3203

Так если он не сразу будет обрабатывать - какой от него смысл?

Sander - 2015-02-2819 января 2012 20:41 - #3208

Скрипт будет запускаться при наведении курсора на объект, а не создавать кучу тултипов, которые могут быть и не востребованы...

kovalenko3331 - 2015-02-2820 марта 2012 09:54 - #4313

Подскажи как сделать чтобы обрабатывались теги а и img?
Ставлю так (".ttp","tooltip") выводит undefined, так (".ttp a","tooltip") выводит title ссылок, а мне нужно еще и изображений. Пробовал так: $(function({simple_tooltip(".ttp a","tooltip");});$(function({simple_tooltip(".ttp img","tooltip");}); и так: (".ttp а img","tooltip") и другие варианты, но без успешно.

Эксперт

1925

nowheremany - 2015-02-2821 марта 2012 06:35 - #4320

А отдельно не пробывали?
(".ttp a","tooltip")
(".ttp img","tooltip")

Благодарность принимаю тут Связь

ПафНутиЙ - 2015-02-2821 марта 2012 13:26 - #4323

сразу оба тега не будут обрабатываться. либо одно, либо другое.

kovalenko3331 - 2015-02-2821 марта 2012 14:01 - #4324

Блин ну засада просто, первый скрипт что в вопросе у меня, слишком большой, у второго нет переворачивания, а в твоем нельзя указать несколько тегов, к примеру:

<script>
$(document).ready(function(){$(".new a").easyTooltip()});$(document).ready(function(){$(".new img").easyTooltip()});$(document).ready(function(){$(".items img").easyTooltip()});
</script>

ПафНутиЙ - 2015-02-2821 марта 2012 14:12 - #4325

я обычно так делаю:

simple_tooltip(".ttp, .ttp_lnk a","tooltip");

соответственно если указать класс ttp_lnk - будет тултип у всех ссылок в блоке, если прописать ttp - будет тултип из title блока, имеющего этот класс

kovalenko3331 - 2015-02-2821 марта 2012 14:23 - #4326

Спасибо за подсказку, буду пробовать. Не охота снова искать скрипт, твой вполне подходит.

kovalenko3331 - 2015-02-2821 марта 2012 15:28 - #4330

Паша, еще вопрос, можно поднять немного положение title относительно курсора?, в скрипте нашел только расстояние вправо от него.

korkus - 2015-02-2831 октября 2013 19:02 - #18565

Скажите пожалуйста, как исправить отображение данного tooltip в браузере Safary?
В Сафари, при наведении на ссылку тултип показывается довольно далеко от самой ссылки, что очень напрягает...
Есть ли решение?
Или может есть какой-то другой готовый тултип корректно работающий и в Сафари?

jQuery Tooltip (Всплывающая подсказка)

Ответил: ПафНутиЙ

14 комментариев

Похожие вопросы

Не отображаються страницы

navigation.tpl отказывается дружить!

Скрытие полей при добавлении новости в зависимости от категории

Как разрешить GIF аватары в DLE?

Вывод смайлов не используя {editor}

Удаление новости автором

Top-News вставить код

Не загружается аватар ДЛЕ 9.7.

Как реализовать оповещения сообщений в яндекс браузере, как у вк?

Как сделать подпункты в select?