Question

我正在使用以下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的）;

Answer 1

jQuery Tools Tooltip (+ Dynamic Plugin)支持这一点;我建议您切换到使用它或尝试在现有设置上实现代码。

Answer 2

而不是

 $("#" + 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")

修改JQuery easyTooltip以检测屏幕边缘

2 个答案: