Question

我是jQuery的新手，通过搜索和查找示例我已经得到qTip2插件以我真正喜欢的方式呈现数据。请参阅：http://tcb.cbmiweb.com/foundation/test1.html。在底部，请悬停 服务级别 链接，以便在持久工具提示中公开表格数据。

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的输出相同，我在开发人员工具中略微探讨过。

总之，我的目标是在＆＃34;订阅＆＃34;上制作工具提示。页面看起来和第一页上的一样好（test1.html）。请帮帮我。

E D I T - U P D A T E：添加与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.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页面上面的代码可以按照我的意愿运行。关于＆＃34;问题的代码＆＃34;页面几乎完全一样。如何使第二个工具提示输出与第一个相同。我希望这会让我的问题变得清晰，有人会反对DownVote。我不是想偷懒。我可以从问题页面发布更多代码。

Answer 1

我使用Chrome开发者工具发现了问题。简而言之，“问题”显示缺少对foundation.css的引用，其中TABLE选择器（和其他CSS规则）解释了这些差异。 CSS Differences here

根据foundation.css，表格有白色背景等。左侧窗格显示此css如何影响pricetable。右侧窗格中显示的问题显示如果没有table.css规则，表元素存在固有的差异。

我会思考如何正确地解决这个问题，而不会在.aspx页面上产生太多的连锁反应。这个问题的起源源于ASP.Net webforms项目开始时的不良网站设计，特别是在CSS方面。事后来说，我希望我能撤回这个问题;我只需要更深入地学习Chrome开发人员工具并使用它来查找差异。

qTip2样式结果与预期不同

1 个答案: