Расположение подсказки

Question

Я пытаюсь сделать всплывающие подсказки в левой части курсора вместо правой, с помощью плагина jquery под названием EasyTooltip.

Я пытаюсь дать отрицательное значение ввызов заголовка, целью которого было бы повлиять на позиционирование по оси x, но без эффектов (ничего не появляется, в то время как положительное значение на обеих осях должно работать нормально):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);

Большое спасибо за любой вклад.Cheers,

Answer 1

На самом деле просто использование значения, такого как -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) из текущей позиции мыши, чтобы расположить подсказку.

Answer 2

try alert((e.pageX + options.xOffset) + "px") после применения css в функции $(this).hover, по какой-то причине он может вернуться с NaNpx, иначе это может быть выстрел из всплывающей подсказки в левой части экрана с -300, вы пытались -1 -10, -100?

Также parseInt(options.xOffset) может помочь вам.

Просто угадайте, как все выглядит хорошо в приведенном вами сценарии.

Answer 3

Я изменил 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);

И не забудьте добавить это в свой CSS:

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