保持頁面邊界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> page.right，tip.right = page.right ））或其他東西..

有沒有辦法做到這一點？

至少，我想確保它永遠不會導致hscroll欄。

感謝

Answer 1

我有三個傻答案...

1. 使用position:fixed而不是position:absolute上qtip。
2. 使用max-width而不是width並定義right:0，這樣qtip的右側將永遠不會超過身體的最右側。
3. 嘗試tipy一個jQuery工具提示插件我自己，（在這種情況下告訴我你在想什麼）。