Javascript 定位工具提示

我正在尝试使用一个名为EasyTooltip的jquery插件，使我的工具提示在光标的左侧而不是右侧弹出

我试图在标题的调用中给出一个负值，其目的是影响x轴的定位，但没有任何影响（没有显示任何内容，而两个轴中的正值正常工作）：

$（文档）.ready（函数（）{
$（“.middle img”）.easyTooltip({
工具提示：“easyTooltip2”，
xOffset:-300，
约比：50
});
});

我对javascript非常陌生，我想我必须破解这个脚本，但我需要你的建议。以下是脚本：

/*
 *  Easy Tooltip 1.0 - jQuery plugin
 *  written by Alen Grakalic    
 *  http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *  Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *  Dual licensed under the MIT (MIT-LICENSE.txt)
 *  and GPL (GPL-LICENSE.txt) licenses.
 *
 *  Built for jQuery library
 *  http://jquery.com
 *
 */

(function($) {

    $.fn.easyTooltip = function(options){

        // default configuration properties
        var defaults = {    
            xOffset: 10,        
            yOffset: 20,
            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("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);

/*
*简易工具提示1.0-jQuery插件
*作者：阿伦·格拉卡里克
*  http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
*
*版权所有（c）2009阿伦·格拉卡里克(http://cssglobe.com)
*MIT下的双重许可（MIT-LICENSE.txt）
*和GPL（GPL-LICENSE.txt）许可证。
*
*为jQuery库构建
*  http://jquery.com
*
*/
（函数（$）{
$.fn.easyTooltip=函数（选项）{
//默认配置属性
变量默认值={
xOffset:10，
yOffset:20，
工具提示：“easyTooltip”，
单击删除：false，
内容：“，
useElement:“
}; 
var options=$.extend（默认值，选项）；
var含量；
此.each（function（）{
var title=$（this.attr（“title”）；
$（this）.hover（函数（e）{
content=（options.content！=“”）？options.content:标题；
content=（options.uselement！=”）？$（“#”+options.uselement）.html（）：content；
$（this.attr（“title”，”）；
如果（内容！=“”&内容！=未定义）{
$（“正文”）。追加（“+content+”）；
$（“#”+选项。工具提示）
.css（“位置”、“绝对”）
.css（“顶部”（e.pageY-options.yOffset）+“px”）
.css（“左”（e.pageX+options.xOffset）+“px”）
.css（“显示”、“无”）
.fadeIn（“快速”）
}
},
函数（）{
$（“#”+options.tooltipId.remove（）；
$（此）.attr（“标题”，标题）；
}); 
$（this）.mousemove（函数（e）{
$（“#”+选项。工具提示）
.css（“顶部”（e.pageY-options.yOffset）+“px”）
.css（“左”（e.pageX+options.xOffset）+“px”）
}); 
如果（选项。单击删除）{
$（此）.mousedown（函数（e）{
$（“#”+options.tooltipId.remove（）；
$（此）.attr（“标题”，标题）；
});             
}
});
};
})（jQuery）；

非常感谢您的任何意见。 干杯，

尝试

警报（（e.pageX+options.xOffset）+“px”）

在

$中应用css后（此）。悬停

功能，它可能出于某种原因返回NaNpx，否则它可能会用-300从屏幕左侧弹出工具提示，您是否尝试过-1，-10，-100

另外，

parseInt（options.xOffset）

可能对您有所帮助

---

只是在这里猜测一下，因为在您引用的脚本中看起来一切正常。

实际上，仅使用-200这样的值将修复工具提示的左侧，但当您有更多工具提示内容时，就会开始引发问题。因此，更好的方法是确定工具提示的宽度和内容，然后调整大小（下面是一个示例）。您必须稍微更改插件和css：

CSS

脚本：

替换此项：

.css("left",(e.pageX + options.xOffset) + "px")

用这个（在两个地方）

---

工具提示需要放置在屏幕外，因为如果将其设置为

display:none

，则宽度将返回为零。在脚本中，您将从当前鼠标位置减去工具提示的宽度、偏移量和光标的宽度（20），以定位工具提示。

我更改了js，因此它现在可以在离开窗口大小时更改x轴（但我也删除了一些选项并优化了脚本）

无论如何，如果它能帮助某人：

/*
 *  Easy Tooltip 1.0 - jQuery plugin
 *  written by Alen Grakalic    
 *  adapt from http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *  Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *  Dual licensed under the MIT (MIT-LICENSE.txt)
 *  and GPL (GPL-LICENSE.txt) licenses.
 *
 *  Built for jQuery library
 *  http://jquery.com
 *
 *
 *  Renew by Spektrum media  http://spektrummedia.com
 *  Now the tooltip goes to the left when it's out of X scope
 *
 */

(function ($) {

    $.fn.easyTooltip = function (options) {

        // default configuration properties
        var defaults = {
            xOffset: 10,
            yOffset: 35,
            tooltipId: "easyTooltip",
            content: "",
            useElement: ""
        };

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

        this.each(function () {
            $(this).hover(function (e) {
                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                if (content != "" && content != undefined) {
                    var $tooltip = $("<div id='" + options.tooltipId + "'>" + content + "</div>");
                    $("body").append($tooltip);

                    if ($(window).width() < (e.pageX + $tooltip.width() + options.xOffset)) {
                        $tooltip
                            .css("top", (e.pageY - options.yOffset) + "px")
                            .css("left", (e.pageX - $tooltip.outerWidth() - options.xOffset) + "px")
                            .show();
                    } else {
                        $tooltip
                            .css("top", (e.pageY - options.yOffset) + "px")
                            .css("left", (e.pageX + options.xOffset) + "px")
                            .show();
                    }
                }
            },
            function () {
                $("#" + options.tooltipId).remove();
            });
            $(this).mousemove(function (e) {
                var $tooltip = $("#" + options.tooltipId);
                if ($(window).width() < (e.pageX + $tooltip.width() + options.xOffset)) {
                    $tooltip
                            .css("top", (e.pageY - options.yOffset) + "px")
                            .css("left", (e.pageX - $tooltip.outerWidth() - options.xOffset) + "px")
                            .show();
                } else {
                    $tooltip
                            .css("top", (e.pageY - options.yOffset) + "px")
                            .css("left", (e.pageX + options.xOffset) + "px")
                            .show();
                }
            });
        });

    };

})(jQuery);

---

感谢QM，这是我的css的工具提示-干扰在某种程度上，就像有一个关系之间的宽度，你给工具提示，你可以做什么定位。我只是调整了它们的大小并应用了更小的负值。

.css("left",(e.pageX + options.xOffset) + "px")

.css("left",(e.pageX - $('#'+ options.tooltipId).width() - options.xOffset - 20) + "px")

/*
 *  Easy Tooltip 1.0 - jQuery plugin
 *  written by Alen Grakalic    
 *  adapt from http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *  Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *  Dual licensed under the MIT (MIT-LICENSE.txt)
 *  and GPL (GPL-LICENSE.txt) licenses.
 *
 *  Built for jQuery library
 *  http://jquery.com
 *
 *
 *  Renew by Spektrum media  http://spektrummedia.com
 *  Now the tooltip goes to the left when it's out of X scope
 *
 */

(function ($) {

    $.fn.easyTooltip = function (options) {

        // default configuration properties
        var defaults = {
            xOffset: 10,
            yOffset: 35,
            tooltipId: "easyTooltip",
            content: "",
            useElement: ""
        };

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

        this.each(function () {
            $(this).hover(function (e) {
                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                if (content != "" && content != undefined) {
                    var $tooltip = $("<div id='" + options.tooltipId + "'>" + content + "</div>");
                    $("body").append($tooltip);

                    if ($(window).width() < (e.pageX + $tooltip.width() + options.xOffset)) {
                        $tooltip
                            .css("top", (e.pageY - options.yOffset) + "px")
                            .css("left", (e.pageX - $tooltip.outerWidth() - options.xOffset) + "px")
                            .show();
                    } else {
                        $tooltip
                            .css("top", (e.pageY - options.yOffset) + "px")
                            .css("left", (e.pageX + options.xOffset) + "px")
                            .show();
                    }
                }
            },
            function () {
                $("#" + options.tooltipId).remove();
            });
            $(this).mousemove(function (e) {
                var $tooltip = $("#" + options.tooltipId);
                if ($(window).width() < (e.pageX + $tooltip.width() + options.xOffset)) {
                    $tooltip
                            .css("top", (e.pageY - options.yOffset) + "px")
                            .css("left", (e.pageX - $tooltip.outerWidth() - options.xOffset) + "px")
                            .show();
                } else {
                    $tooltip
                            .css("top", (e.pageY - options.yOffset) + "px")
                            .css("left", (e.pageX + options.xOffset) + "px")
                            .show();
                }
            });
        });

    };

})(jQuery);

#easyTooltip
{
    position: absolute;
    display: none;
}