qTip2造型結果與預期不同

我是jQuery的全新品牌，並且通過搜索和查找示例我已經有了以我真正喜歡的方式呈現數據的qTip2插件。請參閱：http://tcb.cbmiweb.com/foundation/test1.html。在底部，請懸停鏈接級別的服務以公開持久性工具提示中的表格數據。qTip2造型結果與預期不同

Good tooltip on test1.html page

我知道一般這裏發生了什麼，我喜歡的顯示器（尤其是字體，交替的行和邊框色調）的造型。我已經四處搜尋，不知道這是如何完成的。我懷疑這個：<tr data-browser="ie" class="odd gradeX">有助於實現結果，但不確定。

但最重要的，就是我未能獲得相關頁面上相同的結果（請參見：http://tcb.cbmiweb.com/UIForms/Subscribing.aspx# - 在鏈接上再次徘徊的服務水平的

this is the problem tooltip appearance

當。我看我的代碼，兩頁應該是相同的，但顯然他們不是。在Chrome瀏覽器，FF和IE11上的輸出是一樣的，我已經用開發者工具捅了一下

總之，我的目標是在「訂閱」頁面上爲此提供的工具提示看起來與在第一頁上（test1.html）所做的一樣好。請幫助我。

編輯 - 更新：

#pricetable th td{ 
    text-align:center; 
} 
.myInlineQtipCenter{ 
    text-align:center; 
} 
.myCustomClass{ 
    border-color: rgb(0,190,0); 
    background-color: #ddd; 
} 
.myCustomClass .qtip-content{ 
    font-size: 18px; 
} 
.myContainer { 
    background-color: #FCF6CF;  
    /* width:100%; */ 
    border: 5px solid white; 
    margin-bottom: 1%; 
} 
.tooltiptext{ 
    display: none; 
}

標記內test1.html：

<a id="myLink" href="#">levels of service</a> 
    <div class="tooltiptext"> 
     <table id="pricetable" cellpadding="0" cellspacing="0" border="0" width="100%" > 
      <thead> 
       <tr> 
        <th class="myInlineQtipCenter">Edition</th> 
        <th class="myInlineQtipCenter">Maximum Users</th> 
        <th class="myInlineQtipCenter">Annual Cost</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr data-browser="ie" class="odd gradeX"> 
        <td class="myInlineQtipCenter">Home</td> 
        <td class="myInlineQtipCenter">2</td> 
        <td class="myInlineQtipCenter">$36.00</td> 
       </tr>        
       <tr data-browser="ie" class="odd gradeX"> 
        <td class="myInlineQtipCenter">Small Business</td> 
        <td class="myInlineQtipCenter">5</td> 
        <td class="myInlineQtipCenter">$120.00</td> 
       </tr>        
       <tr data-browser="ie" class="odd gradeX"> 
        <td class="myInlineQtipCenter">Enterprise</td> 
        <td class="myInlineQtipCenter">unlimited</td> 
        <td class="myInlineQtipCenter">$250.00</td> 
       </tr>        
      </tbody> 
     </table>         
    </div>

腳本在TEST1的底部到test1.html（所需的外觀）相關的添加代碼段.html：

$('a#myLink').each(function() { 
     $(this).qtip({ 
      content: { 
       text: $(this).next(".tooltiptext"), 
       title: { text: 'Service level pricing:',button: true} 
      } 
      , 
      style: {classes: 'qtip-youtube qtip-close myCustomClass'} 
      , 
      position: { 
       my: 'top left', 
       at: 'bottom center' 
      } 
      , 
      events: { 
       hide: function (event, api) { 
        if (event.originalEvent.type !== 'click') 
         return false; 
       } 
     } 
     }); 
    });

再次，test1.html頁面上的代碼按我的意願工作。「問題」頁面上的代碼幾乎完全相同。如何使第二個工具提示輸出成爲第一個。我希望這可以讓我的問題變得清晰，並且有人倒轉了DownVote。我不想懶惰。我可以從問題頁面發佈更多代碼。

來源

2014-03-12 John Adams

服務工具提示的級別正在爲我工作chrome ...我認爲o。O –

我是qTip2的忠實擁躉，但在各種瀏覽器中找到了令人厭煩，煩瑣和不一致的風格。我已經轉移到Tooltipster這是一個很容易開箱即用的工具。 – Sparky

@Michel - 感謝您的努力。通過插入圖片時添加的評論，我想你誤解了我。現在，test1.html中的第一張圖片顯示了帶有「斑馬紋」條紋和字體的「良好」工具提示。您添加的第二張圖像顯示整個屏幕，黑色工具提示裏面沒有斑馬條紋等。我不知道條紋是如何到達那裏的，如果我知道更多，也許我可以在「訂閱」頁面上重現外觀。 –

我使用Chrome開發人員工具發現了該問題。簡而言之，「問題」顯示缺少對foundation.css的引用，其中TABLE選擇器（和其他CSS規則）說明了差異。 CSS Differences here

根據foundation.css，表格有一個白色的背景等等。左邊的窗格顯示了這個css如何使得pricetable受到影響。右側窗格中顯示的問題顯示瞭如何在沒有foundation.css規則的情況下存在固有的差異。

我會思考如何正確解決這個問題，而不會在.aspx頁面上產生太多的連鎖反應。這個問題的根源在於ASP.Net webforms項目開始時的網站設計不佳，特別是關於CSS。事後看來，我希望我能迴避這個問題;我只需要更深入地研究Chrome開發人員工具並使用它來查找差異。

來源

2014-03-13 17:24:37

qTip2造型結果與預期不同

回答

相關問題