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

【问题标题】：Jquery-UI sortable tooltip opacityJquery-UI 可排序工具提示不透明度
【发布时间】：2015-08-25 19:24:28
【问题描述】：

我在几个 UL 之间创建了一个可排序表的列表。我有这样可排序的 LI 有一个工具提示（ui-tooltip），它会在悬停时显示。但是当它出现时，它的不透明度约为 50-70%，我仍然可以看到工具提示窗口后面的其他 LI 的文本，尽管我看不到它后面的 LI 的边界。我浏览了 jQuery-UI 的 css 文件，并在 jquery-ui.css、jquery-ui.structure.css 和 jquery-ui.theme.css 三个文件中使用了不透明度设置，设置 opacity: 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 作为一个类添加到隐藏跨度有关。也许我误解了工具提示的工作原理。

【问题讨论】：

标签： jquery-ui tooltip opacity jquery-ui-sortable

【解决方案1】：

你必须真正去覆盖 jQuery 工具提示 css。您可以使用以下 css 来做到这一点：

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

如果您想创建自定义 CSS 类供您的工具提示使用，您可以定义您的自定义 CSS 类，然后将它们分配给您的工具提示，如下所示：

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

祝你好运

【讨论】：

【解决方案2】：

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

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

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

【讨论】：