将Qtip保持在页面范围内？

Question

我正在使用QTip作为侧边栏：

正如您所看到的，QTip稍微离屏，并在我的屏幕上创建了一个丑陋的hscrollbar。

以下是代码：

function appendCalendarEventToList(className, event) {

    var eventObject = {
        title: event.title,
        id: event.id,
        type: event.type,
        color: event.color,
        description: event.description,
        canReoccur: event.canReoccur,
        reoccurVal: event.reoccurVal,
        estHours: event.estHours
    };

    var div = document.createElement("div");
    div.className = 'external-event';
    div.style.background = event.color;
    div.innerHTML = event.title;

    // store the Event Object in the DOM element so we can get to it later
    $(div).data('eventObject', eventObject);

    $(div).draggable({
        helper: function () {
            $copy = $(this).clone();
            $copy.data('eventObject', eventObject);
            $copy.css({ "list-style": "none", "width": $(this).outerWidth() }); return $copy;
        },
        appendTo: 'body',
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
    });

    $(className).append(div);

   $(div).qtip({
        content: event.title,

        position:
            {
                target: 'mouse'
            },
        //  show: { event: 'click' },
        hide: { event: 'mousedown mouseleave' },
        style: {
            width: 200,
            padding: 5,
            color: 'black',
            textAlign: 'left',
            border: {
                width: 1,
                radius: 3
            },


            classes: {
                tooltip: 'ui-widget',
                tip: 'ui-widget',
                title: 'ui-widget-header',
                content: 'ui-widget-content'
            }
        }
    });


    return div;
}

现在，我想要的是，如果我能将它保留在页面内（如果（tip.right＆gt; page.right，tip.right = page.right））或其他东西......

有没有办法做到这一点？

至少，我想确保它永远不会导致hscroll吧。

由于

Answer 1

我有三个愚蠢的答案......

1. 在qtip上使用position:fixed代替position:absolute。
2. 使用max-width代替width并定义right:0，这样qtip的右侧将永远不会超过身体的最右侧。
3. 尝试tipy我自己编写的jQuery工具提示插件（在这种情况下告诉我你的想法）。