javascript - 将 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;
}

现在，我想要的是，如果我可以将它保留在页面内（if（tip.right > page.right，tip.right = page.right））或其他东西..

有没有办法做到这一点？

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

谢谢

Answer 1

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

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