2013-05-09 40 views
3

我使用Qtip 2對於MVC的驗證,如提及here更改Qtip的現在的位置,同時滾動

qtip工作正常,但我有一個奇怪的問題,當我滾動頁面Qtips位置保持靜止(假設是移動的控制移動)

我的代碼在jquery.validate.unobtrusive.js

function onError(error, inputElement) { // 'this' is the form element  
    var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"), 
    replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false; 

    // Remove the following line so the default validation messages are not displayed  
    // container.removeClass("field-validation-valid").addClass("field-validation-error"); 

    error.data("unobtrusiveContainer", container); 

    if (replace) { 
     container.empty(); 
     error.removeClass("input-validation-error").appendTo(container); 
    } 
    else { 
     error.hide(); 
    } 

    /**** Added code to display the error message in a qTip tooltip ****/ 
    // Set positioning based on the elements position in the form 
    var elem = $(inputElement), 
     corners = ['top right', 'left bottom'], 
     flipIt = elem.parents('span.right').length > 0; 

    // Check we have a valid error message 
    if (!error.is(':empty')) { 
     // Apply the tooltip only if it isn't valid 
     elem.filter(':not(.valid)').qtip({ 
      overwrite: false, 
      content: error, 
      position: {      
       my: corners[flipIt ? 0 : 1], 
       at: corners[flipIt ? 1 : 0], 
       viewport: $(window) 
      }, 
      show: { 
       event: false, 
       ready: true 
      }, 
      hide: false, 

      style: { 
       classes: 'qtip-red' // Make it red... the classic error colour! 
      } 
     }) 

     // If we have a tooltip on this element already, just update its content 
     .qtip('option', 'content.text', error); 
    } 

     // If the error is empty, remove the qTip 
    else { elem.qtip('destroy'); } 
} 

版本詳情: Qtip 2 jQuery的1.9.1 MVC 4

我想移動Qtip,因爲我的控件在頁面中移動。 在此先感謝。

回答

3

對我來說真的很好用的是指定position.container讓我們知道qtip應該附加到什麼元素。這樣,當你滾動時,qtip應該與它一起滾動。

$('.selector').qtip({ 
    content: { 
     text: 'I am appended within a custom tooltips DIV' 
    }, 
    position: { 
     container: $('div.tooltips') 
    } 
}); 

文檔可以在這裏找到:http://qtip2.com/options#position.container

相關問題