Question

我在几个UL之间创建了一个可排序表列表。我已经让可排序的LI有一个工具提示（ui-tooltip）显示在悬停状态。但是当它出现时，它的不透明度大约为50-70％，我仍然可以在工具提示窗口后面看到其他LI的文本，尽管我看不到LI的边界。在它背后。我已经浏览了jQuery-UI的css文件，并使用三个文件中的不透明度设置，jquery-ui.css，jquery-ui.structure.css和jquery-ui.theme.css，设置不透明度：1或IE8选项为100。我确实在jQuery-UI themeroller上查看工具提示是否有任何设置，但没有运气。任何人都有关于从何处获取它的想法，以便工具提示不显示其背后的文本？

在此处添加了代码

好吧，也许它不完全是一个jQuery-UI工具提示，现在我已经玩了一下它。这是UL的一个条目：

            <ul id="sortList1" class="sortable sortListEntryArea">
                <li class="ui-state-default sortableCSS sortableBucket" id="competency6" competencyName="Technical Credibility">
                    <div>
                        <div id="div0" class="competencyCount"></div>
                        <div class="competencyName">
                            <span class="ui-tooltip" id="competency0Title" title="">
                                Technical Credibility 2
                                <span>
                                    Understands and appropriately applies principles, procedures, requirements, regulations, and policies
                                    related to specialized expertise. Remains current with technology, tools, trends, and evolving practices
                                    in area of expertise.
                                </span>
                            </span>
                        </div>
                    </div>
                </li> 
                <li class="ui-state-default sortableCSS sortableBucket" id="competency7" competencyName="Strategic Thinking">
                    <div>
                        <div id="div1" class="competencyCount"></div>
                        <div class="competencyName">
                            <span class="ui-tooltip" id="competency1Title" title="">
                                Strategic Thinking 2
                                <span>
                                    Formulates goals, objectives and priorities that facilitate achievement of the organizational vision.
                                    Implements plans consistent with the long-term interests of the organization in a global environment
                                    that takes into consideration the environment, resources, capabilities, constraints, and organizational
                                    goals and values. Capitalizes on opportunities and manages risks and contingencies, recognizing the
                                    implications for the organization and stakeholders.
                                </span>
                            </span>
                        </div>
                    </div>
                </li>

            </ul>

然后这是有助于使其工作的CSS，...我想......：

li.sortableCSS span span{
    position: absolute;
    left: -9999px;
    margin: 0;
    padding: 3px 3px 3px 3px;
    border-style:solid;
    border-color:black;
    border-width:1px;
    z-index: 6;
    width: 275px;
    opacity: 1;
}


li.sortableCSS:hover span span{
    left: 2%;
    background: #dfdfdf;
    margin: 22px 0 0 0;
    z-index:6;
    width: 275px;
    opacity: 1;
}

这似乎与我将ui-tooltip作为类添加到隐藏范围有关。也许我误解了工具提示的工作原理。

Answer 1

你必须实际去覆盖jQuery工具提示css。您可以使用以下css执行此操作：

.tooltip {
 opacity:0.8;
 /* for IE */
 filter:alpha(opacity=80);     
}

如果要为工具提示创建自定义CSS类，可以定义自定义CSS类，然后将它们分配到工具提示中，如下所示：

(".selector").tooltip {
extraClass:"customCssClass"
}

祝你好运

Answer 2

我遇到了同样的问题，并通过覆盖 ui-widget-shadow 类的默认 css（在 jquery-ui.css 中设置）解决了它，该类为整个工具提示 div 提供了不透明度0.3。

我在自己的 css 文件中添加了：

.ui-widget-shadow {
    opacity: 1;
}

Jquery-UI可排序工具提示不透明度

2 个答案: