javascript-定位工具提示

2019-11-07 00:35:32 阅读：254 来源： 互联网

标签：tooltip positioning javascript jquery

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

我试图在标头的调用中给出一个负值,目的是影响x轴定位,但没有任何效果(什么都没有出现,而两个轴上的正值通常都可以工作)：

<script type="text/javascript">
$(document).ready(function() {

    $(".middle img").easyTooltip({
        tooltipId: "easyTooltip2",
        xOffset: -300,
        yOffset: 50
    });
});
</script>

我对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);

非常感谢您的投入.
干杯,

解决方法:

实际上,仅使用-200之类的值即可修复工具提示的左侧,但是当您具有更多工具提示内容时,就会开始产生问题.因此,一种更好的方法是确定带有内容的工具提示宽度,然后调整大小(此处为demo).您将不得不更改插件和CSS一点点：

的CSS

#easyTooltip{
 padding:5px 10px;
 border:1px solid #195fa4;
 background:#195fa4 url(bg.gif) repeat-x;
 color:#fff;
 position: absolute;
 top:0;
 left: -9999px;
}

脚本：

替换为：

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

与此(在两个地方)

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

工具提示需要放置在屏幕之外,因为如果您将其设置为display：none,则宽度将返回零.在脚本中,您将从当前鼠标位置减去工具提示的宽度,偏移量和光标的宽度(20)以定位工具提示.

标签：tooltip,positioning,javascript,jquery
来源： https://codeday.me/bug/20191106/2002058.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-定位工具提示