Измените JQuery easyTooltip для определения краев экрана - PullRequest
Новая
       28

Измените JQuery easyTooltip для определения краев экрана

0 голосов
/ 12 сентября 2010

Я использую следующий JQuery-скрипт для создания всплывающих подсказок, проблема в том, что если подсказка приближается к краю экрана, она не переворачивается и не привязывается к краю. 

(function($) {
$.fn.easyTooltip = function(options){
    var defaults = { // default configuration properties
        xOffset: 10,        
        yOffset: 25,
        tooltipId: "easyTooltip",
        clickRemove: false,
        content: "",
        useElement: ""
    };

    var options = $.extend(defaults, options);  
    var content;
    var url;

    this.each(function() {                  
        var title = $(this).attr("title");
        var url = $(this).attr("tooltipURL");
        $(this).hover(function(e){
            if (url != "" && url != undefined) {
                content = '<span class="loadingimage"></span> Loading...';
                tooltip(content);
                $('#'+options.tooltipId).load(url, {"id":$(this).attr("value")}); 
            } else {
                content = (options.content != "") ? options.content : title;
                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                $(this).attr("title","");
                if (content != "" && content != undefined){         
                    tooltip(content);
                }
            }

            function tooltip(content) {
                $("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("fast")
            }

        },
        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);

Ответы [ 2 ]

0 голосов
/ 12 ноября 2010

вместо 

 $("#" + options.tooltipId)
            .css("top",(e.pageY - options.yOffset) + "px")
            .css("left",(e.pageX + options.xOffset) + "px")

Попробуйте что-нибудь вроде: 

    var x = (e.pageX + options.xOffset);//start with your current setting
    //Check to see if it goes off screen
    if ((x + $("#yourdiv").outerWidth()) >= $(window).width()) {
            x = e.pageX - $("#tooltip").outerWidth();
        }

, а затем повторите для y и замените существующий код: 

     $("#" + options.tooltipId)
            .css("top",(y) + "px")
            .css("left",(x) + "px")
0 голосов
/ 12 сентября 2010

Подсказка jQuery Tools (+ Динамический плагин) поддерживает это;Я бы посоветовал вам перейти на это или попробовать реализовать код в вашей существующей установке.

...